Vysvetlite rozdiel medzi cookies, sessionStorage a localStorage.
sobes.tech AI
Odpoveď od AI
Cookies, sessionStorage a localStorage sú mechanizmy webového úložiska, ktoré sa líšia podľa účelu, doby platnosti a objemu uložených údajov.
-
Cookies: Malé fragmenty údajov, ktoré odosiela webový server a ukladajú sa na počítači používateľa webovým prehliadačom. Odosielajú sa s každým ďalším požiadavkom na ten istý server. Používajú sa na overovanie, ukladanie preferencií používateľa, sledovanie stavu košíka.
- Doba platnosti: Určuje sa pri vytváraní (môže byť reléová alebo s určitým koncom platnosti).
- Objem: Obmedzený, zvyčajne niekoľko kilobajtov (okolo 4 KB).
-
sessionStorage: Ukladá údaje iba pre jednu reláciu prehliadača (otvorená záložka alebo okno). Údaje sa vymazávajú pri zatvorení záložky alebo okna.
- Doba platnosti: Do zatvorenia záložky alebo okna.
- Objem: Výrazne väčší ako u cookies (zvyčajne niekoľko megabajtov).
-
localStorage: Ukladá údaje bez doby platnosti, pokiaľ ich používateľ alebo skript výslovne nevymaže. Dostupný je vo všetkých záložkách a oknách toho istého domény.
- Doba platnosti: Stála (do výslovného vymazania).
- Objem: Výrazne väčší ako u cookies (zvyčajne niekoľko megabajtov).
Tu je stručné porovnanie:
| Mechanizmus | Doba platnosti | Dostupnosť | Odosiela sa serveru | Objem (bežný) | Účel |
|---|---|---|---|---|---|
| Cookies | Relatívna alebo s koncom platnosti | Prostredníctvom HTTP hlavičiek | Áno | ~4 KB | Overovanie, sledovanie, preferencie |
| sessionStorage | Do zatvorenia záložky/okna | Prostredníctvom JS API | Nie | ~5-10 MB | Dočasné ukladanie údajov relácie |
| localStorage | Stále (do vymazania) | Prostredníctvom JS API | Nie | ~5-10 MB | Dlhodobé ukladanie údajov |
Príklady použitia JavaScript API:
// Cookies (prístup cez document.cookie, vyžaduje manuálne parsovanie a serializáciu)
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šetky údaje v localStorage