Vysvětlete rozdíl mezi cookies, sessionStorage a localStorage.
sobes.tech AI
Odpověď od AI
Cookies, sessionStorage a localStorage jsou mechanismy webového úložiště, které se liší účelem, dobou platnosti a objemem uložených dat.
-
Cookies: Malé fragmenty dat odesílané webovým serverem a ukládané v počítači uživatele webovým prohlížečem. Odesílají se s každým následným požadavkem na stejný server. Používají se pro autentizaci, ukládání preferencí uživatele, sledování stavu košíku.
- Doba platnosti: Nastavuje se při vytváření (může být relace nebo s určitým datem vypršení platnosti).
- Objem: Omezený, obvykle několik kilobajtů (přibližně 4 KB).
-
sessionStorage: Ukládá data pouze pro jednu relaci prohlížeče (otevřená záložka nebo okno). Data jsou odstraněna při zavření záložky nebo okna.
- Doba platnosti: Do zavření záložky nebo okna prohlížeče.
- Objem: Výrazně větší než u cookies (obvykle několik megabajtů).
-
localStorage: Ukládá data bez data vypršení platnosti, dokud nejsou výslovně odstraněna uživatelem nebo skriptem. Dostupné ve všech záložkách a oknech stejné domény.
- Doba platnosti: Trvalá (do výslovného odstranění).
- Objem: Výrazně větší než u cookies (obvykle několik megabajtů).
Zde je krátké srovnání:
| Mechanismus | Doba platnosti | Dostupnost | Odesílá se na server | Objem (typický) | Účel |
|---|---|---|---|---|---|
| Cookies | S relací nebo s vypršením platnosti | Přes HTTP hlavičky | Ano | ~4 KB | Autentizace, sledování, preference |
| sessionStorage | Do zavření záložky nebo okna | Přes JS API | Ne | ~5-10 MB | Dočasné ukládání dat relace |
| localStorage | Trvalé (do odstranění) | Přes JS API | Ne | ~5-10 MB | Dlouhodobé ukládání dat |
Příklady použití s API JavaScript:
// Cookies (přístup přes document.cookie, vyžaduje ruční parsing a serializaci)
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(); // Vymaže všechna data v localStorage