LocalStorage a SessionStorage

Webové lokálne ukladanie (Web Storage) poskytuje jednoduchý spôsob, ako si webové stránky môžu v prehliadači uložiť údaje na strane klienta bez potreby posielať ich serveru v každom požiadavku. Dve základné rozhrania sú localStorage a sessionStorage. Obidve patria do takzvaného Web Storage API, ktoré je súčasťou moderných prehliadačov a používa sa cez JavaScript.

Ako fungujú localStorage a sessionStorage

• Rámec: Obidva mechanizmy sú viazané na origin (protokol + doména + port). To znamená, že stránka example.com nemôže čítať dáta uložené stránkou example.org ani oveľa menej inej subdomény, ak nie je rovnaký origin.
• Prístup: Dáta sú uložené vo forme párov kľúč–hodnota, kde hodnoty sú textové reťazce. V JavaScripte sa používajú metódy ako setItem, getItem, removeItem a clear.

Príklad:

localStorage.setItem('meno', 'Ján');

const meno = localStorage.getItem('meno'); // "Ján"

• Trvanlivosť: Hlavný rozdiel medzi nimi je v trvanlivosti:
• localStorage: persistuje po zatvorení a opätovnom otvorení prehliadača, až kým ho webová stránka neodstráni alebo používateľ nevyčistí úložisko. Vhodné na dlhodobejšie uloženie nenaliehavých dát (nastavenia, preferencie).
• sessionStorage: platí len na aktuálnu reláciu prehliadača (zvyčajne kartu alebo okno). Dáta sa zmažú pri zatvorení karty alebo okna. Nezdieľa sa medzi kartami, aj keď sú otvorené rovnakým URL.

Praktické použitia

• localStorage: ukladanie používateľských preferencií (tmavý režim, jazyk), stav rozhrania (napríklad obsah košíka v jednoduchých aplikáciách bez backendu), medzipamäť malých objemov dát pre rýchle načítanie.
• sessionStorage: uchovanie dočasných stavov, ktoré nemajú prežiť zatvorenie karty — napr. prechodové formuláre, dočasné filtre v tabuľke pri práci v jednej karte.
• IndexedDB alebo Cache API sú vhodnejšie, ak potrebujete väčšie objemy dát, štruktúrované ukladanie alebo offline PWA funkcionalitu.

Veľkosť a výkon

• Limit ukladania závisí od prehliadača a zariadenia, zvyčajne medzi 5–10 MB na origin pre localStorage. Nie je to striktne štandardizované.
• localStorage a sessionStorage sú synchronné API — volania môžu blokovať hlavný JavaScriptový thread pri veľkom objeme dát. Preto sa pri väčších operáciách uprednostňuje IndexedDB, ktoré je asynchrónne.

Bezpečnosť a riziká

• Prístup cez JavaScript znamená, že ak stránka obsahuje zraniteľnosť typu XSS (cross-site scripting), útočník môže čítať alebo meniť údaje v localStorage/sessionStorage. Preto sa nikdy neodporúča ukladať v nich citlivé dáta, ako sú dlhodobé prístupové tokeny, heslá alebo platobné informácie.
• Na rozdiel od cookies, localStorage neodosiela dáta serveru s každou HTTP požiadavkou. To znižuje prenos, ale zároveň znamená, že localStorage nie je chránené atribútom HttpOnly (ktorý bráni prístupu z JS) — cookies môžu byť nastavené ako HttpOnly a Secure, čo je bezpečnejšie pre session ID.
• Ochrana proti XSS: používanie Content Security Policy (CSP), správne sanitizovanie vstupov a frameworkové postupy pomáhajú minimalizovať riziko.
• Pri ukladaní dát je dobré zvážiť ich šifrovanie na strane klienta, avšak kľúče na dešifrovanie musia byť spravované bezpečne — často to nie je ľahké a prináša vlastné riziká.

Doplnkové tipy a bežné operácie

• Ukladanie objektov: localStorage.setItem('nastavenia', JSON.stringify(obj));

Na čítanie: const obj = JSON.parse(localStorage.getItem('nastavenia') || '{}');

• Odstránenie a kontrola: localStorage.removeItem('meno'); localStorage.clear(); localStorage.length; localStorage.key(0);
• V súkromnom režime (incognito) majú prehliadače odlišné správanie — niektoré blokujú persistentné ukladanie alebo ho automaticky vymažú po zatvorení okna.
• Pre viacero okien tej istej origin: localStorage je zdieľané medzi kartami, ale sessionStorage nie. localStorage podporuje udalosť "storage", ktorá môže byť použitá na synchronizáciu stavu medzi kartami.

Kedy použiť čo

• Ak potrebujete rýchlo uložiť malé ne-citlivé údaje, ktoré majú prežiť reštart prehliadača — localStorage.
• Ak ide o dočasný stav viazaný na konkrétnu kartu — sessionStorage.
• Ak potrebujete väčšiu kapacitu, transakčné operácie alebo indexované dáta — IndexedDB.
• Ak ide o autentifikačné údaje, použite bezpečné cookies (HttpOnly, Secure, SameSite) a server-side relácie, nie localStorage.

Ako si to pozrie používateľ

• V moderných prehliadačoch: Otvorte DevTools (F12) → Application / Storage → Local Storage alebo Session Storage. Tam môžete vidieť, upraviť a vymazať uložené položky.

Zhrnutie: localStorage a sessionStorage sú užitočné nástroje pre ukladanie dát na strane klienta so svojimi výhodami (jednoduchosť, rýchlosť) aj výraznými obmedzeniami (veľkosť, bezpečnosť, synchronnosť). Používajte ich rozumne, neukladajte citlivé informácie a pri návrhu aplikácie zvážte vhodnejší nástroj (cookies, IndexedDB, Cache API) v závislosti od potrieb a rizík.