localStorage, sessionStorage va cookies qanday ishlaydi?

Savol

localStorage, sessionStorage va cookies bir-biridan nimasi bilan farq qiladi?

Qisqa javob

Uchalasi ham ma'lumotlarni mijozda satr ko'rinishida saqlaydi, lekin yashash muddati, hajmi va serverga yuborilishi bilan farq qiladi: localStorage abadiy yashaydi, sessionStorage — vkladka yopilguncha, cookies esa — har bir HTTP-so'rov bilan avtomatik ravishda serverga ketadigan yagona narsa.

Batafsil javob

• localStorage — ma'lumotlarni amal qilish muddatisiz saqlaydi (qo'lda yoki clear() orqali o'chirilmaguncha). Ma'lumotlar bitta manba (origin)ning barcha vkladkalarida mavjud. Hajmi — odatda ~5-10 MB. Faqat JavaScript orqali mavjud, serverga yuborilmaydi.
• sessionStorage — localStorage bilan bir xil API, lekin ma'lumotlar faqat bitta vkladka doirasida yashaydi va u yopilganda o'chiriladi. Bir saytning turli vkladkalari sessionStorageni bir-biri bilan bo'lishmaydi.
• Cookies — tarixan eng qadimgi mexanizm. Asosiy farq: cookies avtomatik ravishda har bir HTTP-so'rovga o'sha domenga (agar path/domain bilan cheklanmagan bo'lsa) biriktiriladi, bu ularni serverda autentifikatsiya uchun yaroqli qiladi, lekin har bir so'rovning og'irligini oshiradi. Hajmi — cookie boshiga ~4 KB. O'z yashash muddatiga (expires/max-age) va xavfsizlik flaglariga ega:
  • HttpOnly — JavaScript'dan mavjud emas (XSS'dan himoya).
  • Secure — faqat HTTPS orqali uzatiladi.
  • SameSite — kross-sayt so'rovlarida cookie yuborilishini cheklaydi (CSRF'dan himoya).

SSR (Nuxt) uchun muhim: localStorage/sessionStorage faqat brauzerda mavjud va serverda mavjud emas, cookies esa serverda ham mavjud (so'rov sarlavhalari orqali), shuning uchun SSR-ilovalarda autentifikatsiya tokenini saqlash uchun odatda aynan cookies ishlatiladi.

Misol

// localStorage — brauzer yopilishidan omon qoladi
localStorage.setItem('theme', 'dark')
localStorage.getItem('theme') // brauzer qayta ishga tushirilgandan keyin ham 'dark'

// sessionStorage — vkladka bilan birga o'ladi
sessionStorage.setItem('draft', 'izoh qoralamasi')

// cookie — yashash muddatini cheklash mumkin va serverga ketadi
document.cookie = 'token=abc123; max-age=3600; Secure; SameSite=Strict'

Qo'shimcha savollar

• Nega SSR-ilovada autentifikatsiya tokeni ko'pincha localStorageda emas, cookie'da saqlanadi?
• HttpOnly nima va u qanday hujumdan himoya qiladi?
• SameSite=Strict/Lax/None boshqa saytdan o'tishda cookie yuborilishiga qanday ta'sir qiladi?