LocalStorage — browserda origin bo‘yicha ajratilgan key-value ma’lumotni uzoq muddat saqlash imkonini beradigan Web Storage API qismi. Ma’lumot browser yopilib qayta ochilgandan keyin ham odatda saqlanib qoladi, user storage’ni tozalamaguncha yoki browser policy uni o‘chirmaguncha mavjud bo‘lishi mumkin.
LocalStorage faqat string qiymatlarni saqlaydi va synchronous API orqali ishlaydi.
Origin bo‘yicha ajratish
Storage scheme, host va port kombinatsiyasiga bog‘liq.
Quyidagilar alohida storage oladi:
https://example.com
http://example.com
https://app.example.com
https://example.com:8443
Bir origin boshqa origin localStorage’ini o‘qiy olmaydi.
Asosiy API
Qiymat yozish:
localStorage.setItem("theme", "dark");
O‘qish:
const theme = localStorage.getItem("theme");
O‘chirish:
localStorage.removeItem("theme");
Barchasini tozalash:
localStorage.clear();
String qiymat
Son, boolean yoki object avtomatik structured type sifatida saqlanmaydi.
Masalan:
localStorage.setItem("count", "15");
Object uchun JSON ishlatilishi mumkin:
localStorage.setItem("user", JSON.stringify(user));
O‘qishda JSON.parse talab qilinadi.
Key
Key ham string sifatida ishlaydi.
key(index) orqali ma’lum indeksdagi key olinishi mumkin.
Storage tartibiga business logic tayanmasligi kerak.
Key namespace bilan yozilishi mumkin:
app:theme
app:filters
Synchronous xususiyat
LocalStorage operationlari main threadda synchronous bajariladi.
Katta qiymatni tez-tez o‘qish va yozish UI’ni bloklashi mumkin.
Katta yoki strukturali data uchun IndexedDB ko‘proq mos.
Hajm cheklovi
Browser origin uchun cheklangan quota beradi.
Aniq hajm browser va platformaga bog‘liq.
Quota tugasa setItem exception qaytarishi mumkin.
Application xatoni boshqaradi va localStorage’ni cheksiz database deb qabul qilmaydi.
Saqlanish muddati
LocalStorageda built-in expiration yo‘q.
Application qiymat bilan birga timestamp saqlashi mumkin:
{
"value": "...",
"expires_at": 123456
}
O‘qishda expiration tekshiriladi.
Eski schema va data cleanup qilinadi.
Storage event
Bir origindagi boshqa tab localStorage qiymatini o‘zgartirsa storage event ishlashi mumkin.
Event o‘zgarishni qilgan ayni tabda odatda ishlamasligi mumkin.
Bu tablar orasida:
- logout;
- theme;
- simple state
sinxronizatsiyasi uchun ishlatiladi.
SessionStorage bilan farqi
LocalStorage uzoqroq saqlanadi va bir origindagi tablar orasida umumiy bo‘lishi mumkin.
SessionStorage odatda bitta top-level browsing session yoki tabga bog‘liq va tab yopilganda tozalanadi.
Ikkalasi ham string va synchronous API’dan foydalanadi.
Cookie bilan farqi
LocalStorage qiymati har HTTP requestda serverga avtomatik yuborilmaydi.
Cookie esa scope va policy bo‘yicha requestga qo‘shiladi.
LocalStorage JavaScriptga ochiq.
HttpOnly cookie JavaScript tomonidan o‘qilmaydi.
Security model tanlovga ta’sir qiladi.
Access token
Bearer tokenni localStorage’da saqlash XSS holatida attacker scriptga uni o‘qish imkonini beradi.
Bu mutlaq taqiq yoki universal yagona yechim emas, lekin threat modelda muhim.
HttpOnly cookie tokenni JavaScript o‘qishidan himoya qiladi, ammo CSRF va cookie policy talab qiladi.
XSS
Sahifada XSS bo‘lsa attacker:
- localStorage’ni o‘qishi;
- qiymatni o‘zgartirishi;
- user nomidan API chaqirishi;
- sensitive state’ni yuborishi
mumkin.
LocalStorage encrypted bo‘lsa ham decryption key JavaScriptda mavjud bo‘lsa XSS undan foydalanishi mumkin.
Personal data
LocalStorage user qurilmasida saqlanadi.
Shared kompyuterda keyingi user qiymatlarni ko‘rishi mumkin.
Logout vaqtida sensitive cache tozalanadi.
Biroq browser backup yoki extension accessi ham threat modelga kiradi.
Private browsing
Private yoki incognito rejimda localStorage vaqtinchalik bo‘lishi, quota boshqacha ishlashi yoki session tugaganda o‘chishi mumkin.
Application persistence’ni kafolat deb qabul qilmaydi.
Storage mavjudligini test qilib, xatoga fallback beradi.
Serialization
JSON formatdagi object versionga ega bo‘lishi mumkin:
{
"version": 2,
"data": {}
}
Application update’dan keyin eski data migrate yoki tozalanadi.
Invalid JSON parse xatosi butun sahifani buzmasligi kerak.
Foydalanish holatlari
LocalStorage quyidagilar uchun qulay:
Serverda muhim source of truth bo‘lgan data faqat localStorage’da saqlanmaydi.
Storage partitioning
Zamonaviy browser privacy sabab third-party context storage’ini top-level sayt bo‘yicha partition qilishi yoki cheklashi mumkin.
Iframe ichidagi storage first-party tabdagi kabi ishlamasligi ehtimoli bor.
Cross-site trackingga qarshi policy’lar platformaga qarab farq qiladi.
Bir nechta account
Bir browserda user accountdan chiqib boshqasiga kirsa oldingi accountga tegishli cache va preference aralashmasligi kerak. Keylar user yoki tenant scope’i bilan nomlanadi, logoutda sensitive qiymatlar tozalanadi. Global theme kabi accountdan mustaqil preference alohida saqlanishi mumkin.
Integrity
User browser devtools orqali localStorage qiymatini o‘zgartira oladi. Shu sababli price, role, premium holat yoki server authorization localStorage’dan ishonchli olinmaydi. Client qiymati faqat UI preference yoki server qayta tekshiradigan hint hisoblanadi.
Error handling
Storage disabled, quota tugagan yoki security policy accessni bloklagan bo‘lishi mumkin. Har operation exception berishi ehtimoli bor. Application memory fallback yoki default qiymat bilan ishlashda davom etadi.
Clear-site-data
Server ayrim logout yoki security holatida Clear-Site-Data header orqali browserdagi storage turlarini tozalashni so‘rashi mumkin. Browser support va scope tekshiriladi.
Bog‘liq tushunchalar
Web Storage API, localStorage, sessionStorage, Origin, Storage event, Browser storage, IndexedDB, Cookie, XSS, Client-side state