59-dars

Storage APIs

Brauzer sahifani yopib qo'ysangiz — JS'dagi barcha o'zgaruvchilar, obyektlar yo'qoladi (chunki ular faqat RAM'da, V8 heap'ida yashaydi). Agar ma'lumotni saqlab qolish kerak bo'lsa (foydalanuvchi sozlamalari, savat, login holati) — brauzer buning uchun bir nechta Storage API taqdim qiladi, ular ma'lumotni diskka yozadi, sahifa yopilsa ham yo'qolmaydi.

To'rtta asosiy variant bor: Cookie, localStorage, sessionStorage, IndexedDB. Ularning har biri — boshqa maqsad, boshqa hajm, boshqa umr davomiyligi uchun mo'ljallangan.

---

1. Cookie — eng qadimiy, server bilan bog'liq

document.cookie = "username=Ali; max-age=3600; path=/";

Cookie — 1994-yilda, HTTP protokoli holat (state) saqlamasligi muammosini yechish uchun yaratilgan (HTTP — stateless: server har so'rovni "birinchi marta ko'rganday" qabul qiladi). Cookie'ning eng muhim xususiyati: u har bir HTTP so'rov bilan avtomatik serverga yuboriladi.

Brauzer → Server: GET /profil
Header: Cookie: username=Ali

Bu — nima uchun login holati "eslab qolinishi" mumkinligining asosi: server cookie'ga qarab, "bu — Ali" deb bilib oladi, har safar parol so'ramaydi.

Cheklovlar:

• Hajmi — ~4KB atrofida (juda kichik)
• Har bir so'rov bilan yuboriladi — katta cookie, har bir so'rovni sekinlashtiradi (rasm, CSS, JS fayllar so'ralganda ham cookie ketaveradi)
• HttpOnly bayrog'i bilan yaratilsa — JS orqali umuman o'qib bo'lmaydi (faqat server ko'radi) — bu XSS hujumlaridan himoya uchun muhim

---

2. localStorage — doimiy, faqat brauzerda

localStorage.setItem('theme', 'dark');
localStorage.getItem('theme'); // "dark"
localStorage.removeItem('theme');

localStorage — 2009-yilda, HTML5 bilan birga kiritilgan, cookie'ning "har doim serverga yuborilish" muammosini yechish uchun. Ma'lumot — faqat brauzerda qoladi, serverga hech qachon avtomatik yuborilmaydi.

Xususiyatlari:

• Hajmi — ~5-10MB (brauzerga qarab farq qiladi)
• Umrbod saqlanadi — foydalanuvchi qo'lda tozalamaguncha, yoki kod orqali o'chirilmaguncha (brauzer yopilsa ham, kompyuter qayta yoqilsa ham — turadi)
• Faqat string saqlaydi — obyekt saqlash uchun JSON.stringify/JSON.parse kerak:

localStorage.setItem('user', JSON.stringify({ name: 'Ali', age: 25 }));
const user = JSON.parse(localStorage.getItem('user'));

Sinxron API — bu muhim nuance: localStorage.setItem() chaqirilganda, brauzer darhol, Call Stack'ni bloklab, diskka yozadi (yoki hech bo'lmasa, diskka yozish tasdiqlanguncha kutadi). Katta hajmda yoki tez-tez chaqirilsa, bu UI'ni muzlatib qo'yishi mumkin — chunki JS bitta thread (Single-thread model, eslang), sinxron operatsiya boshqa hech narsani ishlashiga yo'l qo'ymaydi.

---

3. sessionStorage — localStoragening "vaqtinchalik" versiyasi

sessionStorage.setItem('formStep', '2');

API jihatidan localStorage bilan bir xil (setItem, getItem, removeItem, string-only, sinxron). Yagona farq — umr davomiyligi: sessionStorage — faqat shu tab (vkladka) ochiq turgan davrda yashaydi. Tab yopilsa — ma'lumot yo'qoladi. Yangi tab ochsangiz (hatto bir xil sahifa bo'lsa ham) — bo'sh boshlanadi, oldingi tab bilan umuman bo'lishilmaydi.

Amaliy misol: ko'p bosqichli forma to'ldirilayotganda, foydalanuvchi tasodifan sahifani yangilab yuborsa — sessionStoragedagi progressni tiklash mumkin, lekin tab yopilsa (masalan, forma tugagach) — avtomatik tozalanadi, keyingi safar "eskisi qolib ketmaydi".

---

4. IndexedDB — brauzerdagi haqiqiy ma'lumotlar bazasi

Yuqoridagi uchtasi — oddiy kalit-qiymat (key-value) saqlash. Agar sizga katta hajmda strukturaviy ma'lumot (masalan, minglab yozuv, indekslash, qidiruv) kerak bo'lsa — IndexedDB ishlatiladi.

const request = indexedDB.open('MyDatabase', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  db.createObjectStore('users', { keyPath: 'id' });
};

request.onsuccess = (event) => {
  const db = event.target.result;
  const tx = db.transaction('users', 'readwrite');
  tx.objectStore('users').add({ id: 1, name: 'Ali' });
};

Xususiyatlari:

• Hajmi — yuzlab MB, hatto GB gacha (brauzer va diskdagi bo'sh joyga bog'liq)
• Asinxron API — barcha operatsiyalar event-asosli (yoki Promisega o'ralgan holda, IDBRequest orqali), Call Stack'ni bloklamaydi — chunki oldingi mavzuda ko'rgan Web API mexanizmi orqali ishlaydi: brauzer operatsiyani orqa fonda (fayl tizimi darajasida) bajaradi, tugagach natijani Event Loop orqali qaytaradi
• Obyektlarni to'g'ridan-to'g'ri saqlaydi — JSON.stringify shart emas, murakkab JS obyektlarni (hatto Blob, File) saqlash mumkin
• Indekslash va qidiruv qo'llab-quvvatlaydi — oddiy key → value'dan farqli, "ma'lum shart bo'yicha qidirish" imkoniyati bor (haqiqiy ma'lumotlar bazasiga o'xshab)

IndexedDB — offline-first ilovalar (masalan, Gmail'ning offline rejimi, PWA'lar) uchun asosiy vosita, chunki u katta hajmdagi ma'lumotni UI'ni bloklamasdan saqlay oladi.

---

5. Brauzer darajasida — bularning barchasi qayerda saqlanadi

Bularning barchasi — V8 heap'ida emas! Bu — muhim tushuncha: V8 — faqat JS kodni bajaradi, u xotirani boshqaradi, lekin doimiy saqlash (persistent storage) — bu butunlay boshqa qatlam, brauzerning profil papkasi ichida, disk faylida:

~/.config/google-chrome/Default/
  ├── Cookies (SQLite fayl)
  ├── Local Storage/
  │     └── leveldb/ (Chrome localStorage uchun LevelDB formatidan foydalanadi)
  └── IndexedDB/
        └── https_example.com_0.indexeddb.leveldb/

Ya'ni localStorage.setItem() chaqirilganda, real jarayon:

1. JS engine (V8) — setItem chaqiruvini qabul qiladi
2. Bu — DOM API kabi, Blinkka uzatiladi (V8'ning o'zi buni bajarmaydi, xuddi document.querySelector kabi)
3. Blink — ma'lumotni origin (domen) bo'yicha ajratilgan joyga, diskdagi LevelDB fayliga yozadi
4. Har bir origin (protokol + domen + port) — o'zining alohida storage fazosiga ega — https://a.comning localStorage'i https://b.comga umuman ko'rinmaydi (Same-Origin Policy, xavfsizlik uchun asosiy chegara)

---

Qaysi birini qachon ishlatish — xulosa jadvali

	Hajmi	Umri	Serverga yuboriladimi	API turi	Ishlatilishi
Cookie	~4KB	Belgilangan muddat	Ha, har so'rovda	Sinxron	Login sessiya, server bilan bog'liq holat
localStorage	~5-10MB	Umrbod	Yo'q	Sinxron	Sozlamalar, tema, kesh (kichik hajm)
sessionStorage	~5-10MB	Tab yopilguncha	Yo'q	Sinxron	Vaqtinchalik forma holati, tab-maxsus ma'lumot
IndexedDB	Yuzlab MB+	Umrbod	Yo'q	Asinxron	Katta hajmdagi struktura, offline ilovalar

Storage API'lar — V8 heap'idan tashqarida, brauzer diskida, origin bo'yicha izolyatsiya qilingan holda ma'lumot saqlaydi; tanlov — hajm, umr davomiyligi va server bilan bog'liqlik ehtiyojiga qarab qilinadi, kichik/oddiy holatlar uchun localStorage/sessionStorage, katta/murakkab holatlar uchun IndexedDB.