Chapter 36 — Browser Storage (localStorage, sessionStorage, cookies)

Bu bobda brauzerda ma'lumotni saqlashning uchta asosiy usulini o'rganamiz. Chapter 19'da JSON bilan localStorage'ni qisqacha ko'rgan edik — endi buni to'liq va boshqa usullar bilan solishtirgan holda o'rganamiz.

---

36.1 localStorage

Simple Explanation

localStorage — brauzerda ma'lumotni doimiy (brauzer yopilsa ham, kompyuter o'chirilsa ham) saqlaydigan xotira.

Jadval — Asosiy metodlar

Example

script.js
JavaScriptNusxalash
01localStorage.setItem("username", "Ali");
02 
03console.log(localStorage.getItem("username")); // "Ali"
04 
05localStorage.removeItem("username");
06console.log(localStorage.getItem("username")); // null

⚠️ Common Mistake
localStorage faqat string saqlay oladi. Object yoki array saqlash uchun, Chapter 19'da o'rgangan JSON.stringify()/JSON.parse() kerak:

script.js
JavaScriptNusxalash
01let user = { name: "Ali", age: 25 };
02 
03localStorage.setItem("user", JSON.stringify(user));
04 
05let savedUser = JSON.parse(localStorage.getItem("user"));
06console.log(savedUser.name); // "Ali"

36.2 sessionStorage

Simple Explanation

sessionStorage — localStoragega juda o'xshaydi (bir xil metodlar), lekin ma'lumot faqat brauzer tab yopilguncha saqlanadi.

Jadval — localStorage vs sessionStorage

Example

script.js
JavaScriptNusxalash
01sessionStorage.setItem("tempData", "faqat shu tab uchun");
02 
03console.log(sessionStorage.getItem("tempData"));

💡 Key Idea
sessionStorage — vaqtinchalik ma'lumot uchun ideal, masalan: forma to'ldirish jarayonida vaqtinchalik saqlash, yoki bitta sessiya davomida foydalanuvchi tanlovlarini eslab qolish.

36.3 Cookies

Simple Explanation

Cookie — brauzerda ma'lumot saqlashning eng eski usuli, u localStorage/sessionStoragedan farqli, serverga har bir so'rov bilan avtomatik yuboriladi.

Example — oddiy cookie yaratish

script.js
JavaScriptNusxalash
01document.cookie = "username=Ali; max-age=3600"; // 1 soatga
02 
03console.log(document.cookie); // "username=Ali"

Jadval — Uch usulni solishtirish

🔥 Important
Cookie'lar har bir HTTP so'rovi bilan serverga avtomatik yuboriladi, shuning uchun ular katta hajmdagi ma'lumot uchun mos emas (bu tarmoq trafigini oshiradi). Zamonaviy veb-ilovalarda, autentifikatsiya token'lari kabi kichik, server bilan bog'liq ma'lumotlar uchun cookie, boshqa hamma narsa uchun esa localStorage ishlatiladi.

36.4 ⚠️ Qiyin mavzu: localStorage'ning cheklovlari va xavfsizligi

Simple Explanation

localStorage — qulay, lekin ba'zi muhim cheklovlarga ega, ular ko'p yangi boshlovchilarni "ushlab qoladi".

Cheklov 1 — faqat string

Yuqorida ko'rganimizdek, faqat string saqlanadi. Agar buni unutib, to'g'ridan-to'g'ri object saqlansa:

script.js
JavaScriptNusxalash
01let user = { name: "Ali" };
02 
03localStorage.setItem("user", user); // ❌ Xato usul
04 
05console.log(localStorage.getItem("user")); // "[object Object]" — string'ga noto'g'ri aylantirilgan!

Nima uchun bunday bo'ladi? setItem() — har qanday qiymatni avtomatik ravishda .toString() orqali stringga aylantiradi, lekin object'ning standart .toString() metodi foydali ma'lumot bermaydi, faqat "[object Object]" qaytaradi.
To'g'ri yechim — har doim JSON.stringify() ishlatish (Chapter 36.1'da ko'rsatilgan).

Cheklov 2 — Xavfsizlik

localStorage — JavaScript orqali to'liq kirish mumkin bo'lgan oddiy xotira. Agar sahifada XSS zaifligi (Chapter 17.5) bo'lsa, xakerlar localStoragedagi ma'lumotni (masalan, parol yoki token) o'g'irlashi mumkin.

⚠️ Common Mistake
Juda maxfiy ma'lumotlarni (parollar, kredit karta ma'lumotlari) localStorageda saqlash — xavfsizlik nuqtai nazaridan tavsiya etilmaydi. Bunday ma'lumotlar uchun httpOnly cookie (JavaScript orqali kirish mumkin bo'lmagan, faqat server tomonidan boshqariladigan) afzalroq.

Cheklov 3 — Xotira "to'lib qolishi"

localStorage hajmi cheklangan (odatda ~5-10 MB). Agar chegaradan oshirilsa, xatolik yuz beradi:

script.js
JavaScriptNusxalash
01try {
02    localStorage.setItem("bigData", veryLargeString);
03} catch (error) {
04    console.log("Xotira to'ldi: " + error.message);
05}

🔗 Connection
Bu — Chapter 18'da o'rgangan try/catchning yana bir amaliy qo'llanilishi: tashqi resurs (bu holatda brauzer xotirasi) bilan ishlashda xatolikni kutish va boshqarish har doim yaxshi amaliyot hisoblanadi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
localStoragega "theme" kaliti bilan "dark" qiymatini saqlang, keyin uni o'qib konsolga chiqaring.
Required Concepts:

• localStorage.setItem, getItem
  Hint:
  localStorage.setItem("theme", "dark");

🟡 Exercise 2 — Medium

Task:
Object ({ name: "Vali", score: 95 }) yarating, uni JSON.stringify() bilan localStoragega saqlang, keyin JSON.parse() bilan qayta o'qib, scoreni konsolga chiqaring.
Required Concepts:

• localStorage + JSON (Chapter 19)
  Hint:
  Chapter 36.1'dagi misolga o'xshab yozing.

🔴 Exercise 3 — Hard

Task:
Oddiy "Eslatmalar" (Notes) funksiyasini yozing: addNote(text) — yangi eslatmani localStoragedagi array'ga qo'shadi (avval mavjud eslatmalarni JSON.parse bilan o'qib, yangisini qo'shib, qayta JSON.stringify bilan saqlaydi). getNotes() — barcha eslatmalarni array sifatida qaytaradi.
Required Concepts:

• localStorage + JSON
• Array metodlari (Chapter 7)
  Hint:
  Agar localStorageda hali eslatmalar bo'lmasa, getItem() — null qaytaradi, shuni tekshirib, bo'sh array bilan boshlang.

🔮 Predict the Output

script.js
JavaScriptNusxalash
01let data = { count: 5 };
02 
03localStorage.setItem("data", data);
04 
05console.log(localStorage.getItem("data"));

🧠 Think first! Javobni ko'rishdan oldin kamida 30 soniya o'ylang.

<details> <summary>Answer</summary> "[object Object]"

Why?
localStorage.setItem() — faqat string saqlaydi. Agar object to'g'ridan-to'g'ri berilsa, JavaScript uni avtomatik ravishda .toString() orqali stringga aylantiradi, bu esa object'lar uchun foydasiz "[object Object]" natijasini beradi. JSON.stringify() ishlatilishi kerak edi.

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor:

script.js
JavaScriptNusxalash
01function saveSettings(settings) {
02    localStorage.setItem("settings", settings);
03}
04 
05function loadSettings() {
06    let data = localStorage.getItem("settings");
07    return JSON.parse(data);
08}
09 
10saveSettings({ theme: "dark", fontSize: 16 });
11let settings = loadSettings();
12console.log(settings.theme); // Xatolik!

Your Task:

• Kod ishga tushganda nima bo'lishini bashorat qiling.
• Nima uchun xatolik yuz berishini tushuntiring.
• Kodni tuzating.

<details> <summary>Solution</summary> Muammo: saveSettings — object'ni JSON.stringify()siz to'g'ridan-to'g'ri saqlamoqchi. Bu — "[object Object]" stringini saqlaydi. Keyin loadSettings() bu noto'g'ri stringni JSON.parse() qilishga urinadi, bu esa xatolik beradi (chunki "[object Object]" — to'g'ri JSON format emas).

Yechim:

script.js
JavaScriptNusxalash
01function saveSettings(settings) {
02    localStorage.setItem("settings", JSON.stringify(settings));
03}
04 
05function loadSettings() {
06    let data = localStorage.getItem("settings");
07    return JSON.parse(data);
08}
09 
10saveSettings({ theme: "dark", fontSize: 16 });
11let settings = loadSettings();
12console.log(settings.theme); // "dark"

</details>

📌 Chapter Summary

• localStorage — doimiy, sessionStorage — faqat tab ochiq bo'lguncha saqlaydi.
• Cookie — serverga avtomatik yuboriladi, hajmi kichik, autentifikatsiya uchun ishlatiladi.
• localStorage/sessionStorage — faqat string saqlaydi, object/array uchun JSON kerak.
• Maxfiy ma'lumotlar uchun localStorage xavfsizlik nuqtai nazaridan tavsiya etilmaydi.

🎯 Key Takeaways

• Doimiy ma'lumot uchun localStorage, vaqtinchalik uchun sessionStorage ishlating.
• Object/array saqlashda har doim JSON.stringify()/JSON.parse() ishlating.
• Serverga avtomatik yuborilishi kerak bo'lgan ma'lumot uchun cookie ishlatiladi.
• Maxfiy ma'lumotlarni (parol, token) oddiy localStorageda saqlamang.
• localStorage operatsiyalarini try/catch bilan himoyalash — xotira to'lib qolgan holatlar uchun foydali.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01// localStorage
02localStorage.setItem("key", JSON.stringify(value));
03JSON.parse(localStorage.getItem("key"));
04localStorage.removeItem("key");
05localStorage.clear();
06 
07// sessionStorage — bir xil API
08sessionStorage.setItem("key", "value");
09 
10// Cookie
11document.cookie = "key=value; max-age=3600";

---