Cookies, localStorage yoki sessionStorage: ma’lumotni qayerda saqlash

Qisqa javob

• Cookies — serverga kerak bo‘lgan ma’lumotlar uchun, eng avvalo sessiya identifikatori. HttpOnly, Secure, SameSite bayroqlari bilan himoyalanadi.
• localStorage — brauzer yopilgandan keyin ham saqlanishi kerak bo‘lgan maxfiy bo‘lmagan ma’lumotlar uchun: mavzu, til, forma qoralamasi.
• sessionStorage — bitta tabning vaqtinchalik holati uchun: master qadami, sessiya davomidagi filtrlar.

Maxfiy ma’lumotlar — parollar, to‘lov ma’lumotlari, uzoq muddatli tokenlar — localStorage va sessionStorage’da umuman saqlanmaydi.

Solishtirish

Web Storage’ning aniq limitlari brauzerga bog‘liq, shuning uchun ularning chegarasiga tayanmang.

Cookies: ma’lumot serverga kerak bo‘lganda

Cookie’ni server sarlavha orqali yoki skript document.cookie orqali o‘rnatadi. Brauzer uni mos domenga yuboriladigan so‘rovlarga o‘zi biriktiradi.

Set-Cookie: session=abc123; HttpOnly; Secure; SameSite=Lax; Path=/; Max-Age=86400

Bayroqlar ma’nosi:

• HttpOnly — cookie JavaScript’dan ko‘rinmaydi. Saytga zararli skript kiritilsa (XSS), u cookie’ni o‘qiy olmaydi.
• Secure — faqat HTTPS orqali yuboriladi.
• SameSite — boshqa saytlardan keladigan so‘rovlarda yuborilishni cheklaydi va CSRF xavfini kamaytiradi. Lax — oqilona standart qiymat, Strict — qat’iyroq, None esa Secure talab qiladi va uchinchi tomon ssenariylari uchun kerak.
• Max-Age / Expires — yashash muddati. Ularsiz cookie brauzer yopilguncha yashaydi.

Cookies’ning kamchiligi — har bir so‘rovni og‘irlashtiradi. Ularda katta ma’lumot saqlamang.

localStorage: uzoq muddatli maxfiy bo‘lmagan ma’lumotlar

localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme"); // "dark"

Faqat satrlarni saqlaydi, shuning uchun obyektlar JSON.stringify bilan seriyalanadi va JSON.parse bilan o‘qiladi. Ma’lumotlar bir origin’ning barcha tablari uchun umumiy, storage hodisasi esa tablarni sinxronlash imkonini beradi.

Hisobga oling:

• API sinxron — katta yozuvlar interfeysni sekinlashtirishi mumkin.
• Maxfiy rejimda yoki saqlash taqiqlanganda kirish xato chiqarishi mumkin, shuning uchun chaqiruvlarni try/catchga o‘rang.
• Sahifadagi istalgan skript, jumladan uchinchi tomon skripti ham, localStorage’ni o‘qiy oladi.

sessionStorage: bitta tab holati

API xuddi shunday, lekin ma’lumotlar faqat joriy tabda yashaydi. Qayta yuklash ularni o‘chirmaydi, tabni yopish — o‘chiradi. Bir saytning ikki tabi bir-birining sessionStorage’ini ko‘rmaydi.

Ko‘p qadamli formalar, vaqtinchalik filtrlar, ro‘yxatdagi joylashuv uchun mos.

Klientda nimani saqlab bo‘lmaydi

• Parollar — hech qanday ko‘rinishda.
• Bank kartasi ma’lumotlari va boshqa to‘lov rekvizitlari.
• localStorage/sessionStorage’da uzoq muddatli access va refresh tokenlar: XSS bo‘lsa, ular o‘g‘irlanadi. Sessiyalar uchun HttpOnly cookie ishonchliroq.
• Server huquqlariga ega API kalitlar — brauzerga tushgan hamma narsani foydalanuvchi ko‘rishi mumkin.
• Interfeys ularsiz ishlay oladigan shaxsiy ma’lumotlar.
• Huquq va rollar haqiqat manbai sifatida. Klient ularni almashtirib qo‘yishi mumkin, tekshiruv har doim serverda bo‘ladi.

Qanday tanlash kerak

1. Serverga har bir so‘rovda kerakmi? — cookie.
2. Maxfiymi? — faqat HttpOnly cookie yoki umuman faqat server.
3. Brauzer yopilgandan keyin ham saqlanishi kerakmi? — localStorage.
4. Faqat shu tabda kerakmi? — sessionStorage.
5. Ko‘p tuzilgan ma’lumot yoki fayllar? — IndexedDB.

Ko‘p uchraydigan xatolar

• JWT’ni «tutorialda shunday edi» deb localStorage’da saqlash.
• Production’da Secure va SameSitesiz cookie.
• localStorage’ni try/catchsiz va standart qiymatsiz o‘qish.
• Har bir so‘rovni og‘irlashtiradigan katta obyektlarni cookies’da saqlash.

Bayroqlar haqida batafsil — MDN hujjatlarida.