Cookies, sessionStorage va localStorage o'rtasidagi farqni tushuntiring.
sobes.tech AI
AIdan javob
Cookies, sessionStorage va localStorage veb-xotira qilish mexanizmlari bo'lib, maqsad, yashash muddati va saqlanadigan ma'lumot hajmiga ko'ra farq qiladi.
-
Cookies: Veb-server tomonidan yuborilgan va foydalanuvchining brauzerida saqlangan kichik ma'lumot bo'laklari. Ular keyingi so'rov bilan birga yuboriladi. Autentifikatsiya, foydalanuvchi afzalliklarini saqlash, savatcha holatini kuzatish uchun ishlatiladi.
- Yashash muddati: Yaratuvchida belgilangan (sessiya yoki belgilangan muddati bilan bo'lishi mumkin).
- Hajm: Cheklangan, odatda bir necha kilobayt (taxminan 4 KB).
-
sessionStorage: Faqat bir sessiya davomida (ochiq bo'lim yoki oynada) ma'lumot saqlaydi. Ma'lumotlar bo'lim yoki oynani yopgach, o'chiriladi.
- Yashash muddati: Brauzer bo'limi yoki oynasi yopilguncha.
- Hajm: Ko'pincha cookie'laridan ko'ra katta (odatda bir necha megabayt).
-
localStorage: Muddatsiz ma'lumotlarni saqlaydi, foydalanuvchi yoki skript tomonidan aniq o'chirilmaguncha. Bir domen ichidagi barcha bo'lim va oynalarda mavjud.
- Yashash muddati: Doimiy (aniq o'chirilmaguncha).
- Hajm: Ko'pincha cookie'laridan katta (odatda bir necha megabayt).
Mana qisqacha taqqoslash jadvali:
| Mexanizm | Yashash muddati | Mavjudlik | Serverga yuboriladi | Hajm (odatda) | Maqsad |
|---|---|---|---|---|---|
| Cookies | Sessiya yoki belgilangan muddat | HTTP sarlavhalar orqali | Ha | ~4 KB | Autentifikatsiya, kuzatish, afzalliklar |
| sessionStorage | Bo'lim yoki oynani yopguncha | JS API orqali | Yo'q | ~5-10 MB | Vaqtinchalik sessiya ma'lumotlarini saqlash |
| localStorage | Muddatsiz (o'chirilguncha) | JS API orqali | Yo'q | ~5-10 MB | Uzoq muddatli ma'lumotlarni saqlash |
JavaScript API bilan foydalanish misollari:
// Cookies (document.cookie orqali kirish, qo'lda tahlil qilish va serializatsiya qilish talab etiladi)
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
// sessionStorage
sessionStorage.setItem('id', '123');
let userId = sessionStorage.getItem('id');
sessionStorage.removeItem('id');
// localStorage
localStorage.setItem('theme', 'dark');
let userTheme = localStorage.getItem('theme');
localStorage.removeItem('theme');
localStorage.clear(); // Barcha localStorage ma'lumotlarini tozalash