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("ism", "Aziz");        // yozish

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

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

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

Mavjud bo’lmagan kalit null qaytaradi:

const yoq = localStorage.getItem("bunday-kalit-yoq");
console.log(yoq);   // null

Hamma narsa matn bo’ladi

Bu — asosiy tuzoq:

localStorage.setItem("yosh", 20);

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

Songa qaytarish kerak:

const yosh = Number(localStorage.getItem("yosh"));
console.log(yosh + 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 talaba = { ism: "Aziz", yosh: 20, guruh: "IT-21" };

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

const qayta = JSON.parse(localStorage.getItem("talaba"));
console.log(qayta.ism);        // "Aziz"
console.log(qayta.yosh + 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 saqlanganOl(kalit, standart = null) {
  try {
    const matn = localStorage.getItem(kalit);
    if (matn === null) return standart;
    return JSON.parse(matn);
  } catch {
    return standart;
  }
}

const sozlama = saqlanganOl("sozlama", { mavzu: "yorug'" });
console.log(sozlama.mavzu);

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

Amaliy misol — vazifalar ro’yxati

Quyidagi mantiqni omborxonasiz sinab ko’ring. Haqiqiy loyihada vazifalar 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("qadam", "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 kalit = localStorage.key(i);
  console.log(kalit, "=", localStorage.getItem(kalit));
}

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. saqlanganOl 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.