Izskaidrojiet atšķirību starp cookies, sessionStorage un localStorage.
sobes.tech AI
Atbilde no AI
Cepumi, sessionStorage un localStorage ir arī tīmekļa krātuves mehānismi, kas atšķiras pēc mērķa, derīguma termiņa un uzglabāto datu apjoma.
-
Cookies: Mazas datu daļiņas, kuras nosūta tīmekļa serveris un kuras tiek saglabātas lietotāja datorā pārlūkprogrammas līmenī. Tiek nosūtītas ar katru nākamo pieprasījumu uz to pašu serveri. Tās tiek izmantotas autentifikācijai, lietotāja iestatījumu glabāšanai, iepirkumu groza stāvokļa uzraudzībai.
- Derīguma termiņš: Nosaka pie izveides (var būt sesijas vai ar noteiktu beigu termiņu).
- Apjoms: Ierobežots, parasti daži kilobaiti (apmēram 4 KB).
-
sessionStorage: Glabā datus tikai vienai pārlūkprogrammas sesijai (atvērtai cilnei vai logam). Dati tiek dzēsti, aizverot cilni vai logu.
- Derīguma termiņš: Līdz cilnes vai loga aizvēršanai.
- Apjoms: Krietni lielāks nekā cookies (parasti daži megabaiti).
-
localStorage: Glabā datus bez derīguma termiņa, līdz tie tiek skaidri dzēsti ar lietotāja vai scenārija rīkojumu. Pieejams visās cilnēs un logiem vienā domēnā.
- Derīguma termiņš: Pastāvīgs (līdz skaidri izdzēsts).
- Apjoms: Krietni lielāks nekā cookies (parasti daži megabaiti).
Šeit ir īss salīdzinājums:
| Mehānisms | Derīguma termiņš | Pieejamība | Nosūta serverim | Apjoms (parasts) | Mērķis |
|---|---|---|---|---|---|
| Cookies | Sesijas vai ar beigu termiņu | Ar HTTP galviņām | Jā | ~4 KB | Autentifikācija, uzraudzība, iestatījumi |
| sessionStorage | Līdz cilnes vai loga aizvēršanai | Ar JS API | Nē | Laikina sesijas datu glabāšana | |
| localStorage | Pastāvīgs (līdz izdzēšanai) | Ar JS API | Nē | ~5-10 MB | Ilgtermiņa datu glabāšana |
JavaScript API piemēri:
// Cookies (pieejamas caur document.cookie, prasa manuālu parsēšanu un serializāciju)
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(); // Notīra visus datus localStorage