Local Storage va Session Storage

~15 daq · JavaScript · Brauzer API lari

Muammodan boshlaylik

Foydalanuvchi saytda mavzu (tema) ni tanladi: "qorong'i rejim". Sahifani yangiladi — tema "oq rejim" ga qaytib ketdi. Brauzer yopildi, qayta ochildi — yana standart.

Yoki foydalanuvchi savatga mahsulot qo'shdi. Sahifadan chiqdi. Qaytib kelganda — savat bo'sh.

Bu ma'lumotlarni sahifa yangilanishidan omon qoldirish kerak. Server ga yuborish shart emas — faqat brauzerde saqlansin.

Buning uchun — Local Storage.

Local Storage nima?

Local Storage — brauzer ichidagi kichik ombor. Kalit–qiymat juftliklari saqlanadi. Sahifa yopilsa, brauzer yopilsa ham — o'chib ketmaydi. Faqat foydalanuvchi o'zi tozalaguncha yoki JavaScript o'chirmaguncha saqlanadi.

Hayotiy o'xshatma

Uy daftarchasi. Siz telefon raqamlarini yozdingiz — kitobcha yopilsa ham, ochilsa ham raqamlar o'sha yerda. Hech kim olib ketmaydi. Lekin siz o'chirsangiz — ketadi.

Local Storage — brauzerdagi o'sha daftarcha. Sayt o'z ma'lumotlarini yozadi, keyingi safar ochilganda o'qiydi.

Asosiy metodlar

// Yozish
localStorage.setItem("tema", "qorongʼi");

// Oʻqish
const tema = localStorage.getItem("tema");
console.log(tema); // "qorong'i"

// O'chirish
localStorage.removeItem("tema");

// Hammasini tozalash
localStorage.clear();

Faqat matn saqlanadi — JSON kerak

Local Storage faqat matn saqlaydi. Ob'ekt yoki massiv saqlash uchun avval JSON ga o'girish, o'qishda esa qaytarish kerak.

const sozlamalar = {
  tema:   "qorongʼi",
  til:    "uz",
  hajm:   16,
};

// Saqlash — ob'ekt → matn
localStorage.setItem("sozlamalar", JSON.stringify(sozlamalar));

// O'qish — matn → ob'ekt
const saqlangan = JSON.parse(localStorage.getItem("sozlamalar"));
console.log(saqlangan.tema); // "qorong'i"

Nima uchun JSON.stringify kerak?

// ❌ — ob'ekt to'g'ridan saqlanmaydi
localStorage.setItem("ob'ekt", { ism: "Jasur" });
localStorage.getItem("ob'ekt"); // "[object Object]" — foydasiz matn

// ✅
localStorage.setItem("ob'ekt", JSON.stringify({ ism: "Jasur" }));
localStorage.getItem("ob'ekt"); // '{"ism":"Jasur"}' — JSON matn
JSON.parse(localStorage.getItem("ob'ekt")); // { ism: "Jasur" } ✅

Qiymat yo'q bo'lsa — null

getItem — kalit yo'q bo'lsa null qaytaradi. JSON.parse(null) — null qaytaradi, xato bermaydi.

Shuning uchun o'qishda tekshirish kerak:

const saqlangan = localStorage.getItem("sozlamalar");

// null bo'lsa — standart qiymat
const sozlamalar = saqlangan
  ? JSON.parse(saqlangan)
  : { tema: "oq", til: "uz", hajm: 14 };

Session Storage — sessiya tugaguncha

sessionStorage — localStorage ga o'xshash, lekin brauzer tab yopilganda o'chib ketadi.

sessionStorage.setItem("vaqtinchaJeton", "abc123");
sessionStorage.getItem("vaqtinchaJeton"); // "abc123"
// Tab yopilsa — yo'qoladi

Qachon qaysi?

Amaliy misol — qorong'i rejim

const tugma = document.getElementById("tema-tugma");

// Sahifa yuklanganda saqlangan temani qo'llash
const saqlangan = localStorage.getItem("tema") || "oq";
document.body.className = saqlangan;

// Tugma bosilganda o'zgartirish va saqlash
tugma.addEventListener("click", function() {
  const hozir  = document.body.className;
  const yangi  = hozir === "oq" ? "qorongʼi" : "oq";

  document.body.className = yangi;
  localStorage.setItem("tema", yangi); // ← keyingi safar ham eslab qoladi
});

Tez-tez uchraydigan xatolar

JSON.parse qilmasdan ob'ekt ishlatish:

// ❌ — JSON.parse unutildi
const sozlamalar = localStorage.getItem("sozlamalar");
sozlamalar.tema; // ❌ matn bo'lsa, .tema yo'q

// ✅
const sozlamalar = JSON.parse(localStorage.getItem("sozlamalar") || "{}");
sozlamalar.tema; // ishlaydi

localStorage to'lib qolishi:

Local Storage — domenga qarab 5–10 MB. Katta ma'lumot saqlashga urinish QuotaExceededError beradi.

// ✅ — xavfsiz yozish
try {
  localStorage.setItem("katta_malumot", JSON.stringify(data));
} catch (xato) {
  console.warn("Local Storage to'ldi:", xato.message);
}

Maxfiy ma'lumot saqlash:

Local Storage — brauzerda ochiq saqlanadi. Har qanday JavaScript kodi (xususan XSS orqali) o'qiy oladi. Parol, bank kartasi raqami — hech qachon Local Storage da saqlanmaydi.

Xulosa

Local Storage — brauzerdagi doimiy ombor. Sahifa yopilsa ham, brauzer yopilsa ham saqlanadi.

Faqat matn saqlanadi. Ob'ekt uchun JSON.stringify (yozish) va JSON.parse (o'qish).

getItem — kalit yo'q bo'lsa null. O'qishda tekshirish yoki standart qiymat.

Session Storage — bir xil, lekin tab yopilganda o'chadi.

Maxfiy ma'lumot — hech qachon Local Storage da emas.

Keyingi dars

50-dars: Cookie — o'qish, yozish, o'chirish