JavaScript localStorage bilan ma'lumot saqlash

Sahifa yangilanganda barcha o’zgaruvchilar yo’qoladi. Tanlangan mavzu, savatdagi mahsulot yoki tugallangan vazifalar saqlanib qolishi uchun localStorage ishlatiladi.

Nima bu

To’rt asosiy amal

localStorage.setItem("name", "Aziz");        // yozish

const name = localStorage.getItem("name");    // o'qish
console.log(name);                           // "Aziz"

localStorage.removeItem("name");             // bittasini o'chirish

localStorage.clear();                       // hammasini o'chirish

Mavjud bo’lmagan kalit null qaytaradi:

const missing = localStorage.getItem("bunday-key-missing");
console.log(missing);   // null

Hamma narsa matn bo’ladi

Bu — asosiy tuzoq:

localStorage.setItem("age", 20);

const age = localStorage.getItem("age");
console.log(age);          // "20"  ← text!
console.log(typeof age);   // "string"
console.log(age + 5);      // "205" ← qo'shilmadi, birlashdi

Songa qaytarish kerak:

const age = Number(localStorage.getItem("age"));
console.log(age + 5);   // 25

Xuddi shu muammo true/false bilan ham bor:

Bo’sh bo’lmagan har qanday matn — true. Shuning uchun === "true" bilan solishtiring.

Obyekt saqlash — JSON orqali

localStorage faqat matn saqlaydi, shuning uchun obyekt JSON ga o’giriladi:

const student = { name: "Aziz", age: 20, group: "IT-21" };

localStorage.setItem("talaba", JSON.stringify(student));

const mapWith = JSON.parse(localStorage.getItem("talaba"));
console.log(restored.name);        // "Aziz"
console.log(restored.age + 1);   // 21

stringify bilan yozing, parse bilan o’qing — bu juftlik doim birga yuradi.

Xavfsiz o’qish funksiyasi

Omborxonada buzilgan ma’lumot bo’lishi mumkin, shuning uchun o’qishni himoyalash kerak:

function loadStored(key, fallback = null) {
  try {
    const text = localStorage.getItem(key);
    if (text === null) return fallback;
    return JSON.parse(text);
  } catch {
    return fallback;
  }
}

const settings = loadStored("settings", { theme: "yorug'" });
console.log(settings.theme);

Uch holat qoplandi: kalit yo’q, JSON buzilgan, localStorage ochilmaydi.

Amaliy misol — vazifalar ro’yxati

Quyidagi mantiqni omborxonasiz sinab ko’ring. Haqiqiy loyihada tasks massivi har o’zgarishda saqlanadi:

Naqsh doimiy: o’zgartir → chiz → saqla. Sahifa ochilganda esa teskarisi — o’qi → chiz.

sessionStorage — vaqtinchalik

Bir xil API, boshqa umr:

sessionStorage.setItem("step", "3");

Ko’p qadamli forma holatini saqlashga mos — foydalanuvchi ketgach kerak emas.

Nimani saqlamaslik kerak

Hajm ham cheklangan (~5 MB). Ko’p ma’lumot uchun IndexedDB ishlatiladi.

Kalitlarni sanash

console.log(localStorage.length);

for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  console.log(key, "=", localStorage.getItem(key));
}

Amaliy mashq

Brauzer konsolida bajaring:

1. setItem bilan ismingizni saqlang, getItem bilan o’qing;
2. son saqlab, uni o’qiganda typeof bilan turini tekshiring;
3. obyektni JSON.stringify orqali saqlang va qayta o’qing;
4. removeItem va clear ni sinang;
5. loadStored kabi xavfsiz o’qish funksiyasini yozing;
6. sahifani yangilab, ma’lumot joyida qolganini tasdiqlang.

6-qadam localStorage’ning butun mohiyatini ko’rsatadi.

Qisqacha xulosa

• localStorage ma’lumotni brauzerda doimiy saqlaydi.
• To’rt amal: setItem, getItem, removeItem, clear.
• Hamma qiymat matn bo’lib saqlanadi — songa Number bilan qaytaring.
• Obyekt uchun JSON.stringify / JSON.parse juftligi.
• Yo’q kalit null qaytaradi; o’qishni try/catch bilan himoyalang.
• sessionStorage — brauzer yopilguncha; maxfiy ma’lumot saqlanmaydi.

Keyingi darsda scope va closure — o’zgaruvchilar qayerda ko’rinishi haqida.