LocalStorage

Příklady z praxe

1. 01

   Uložení a čtení nastavení motivu

   Web si pamatuje, že uživatel přepnul na tmavý motiv. Hodnota se uloží při kliknutí a načte se při dalším startu aplikace, ještě před prvním vykreslením obsahu. Protože LocalStorage zná jen řetězce, boolean je potřeba převést ručně.

   // zápis
   localStorage.setItem('theme', 'dark');
   
   // čtení s výchozí hodnotou
   const theme = localStorage.getItem('theme') ?? 'light';
   document.documentElement.dataset.theme = theme;
   
   // složitější stav vyžaduje serializaci
   localStorage.setItem('prefs', JSON.stringify({ theme, fontSize: 16 }));
   const prefs = JSON.parse(localStorage.getItem('prefs') || '{}');

2. 02

   Košík e-shopu přežije zavření prohlížeče

   E-shop drží obsah košíku v LocalStorage, takže se vrácenému návštěvníkovi zboží objeví i po restartu počítače. Zároveň si ukládá časové razítko, protože samotné API expiraci neumí, a po sedmi dnech položky zahodí. Autoritativní zůstává košík na serveru, klientská kopie jen šetří dotazy a snižuje riziko, že vznikne opuštěný košík.

   const KEY = 'cart';
   const TTL = 7 * 24 * 60 * 60 * 1000;
   
   function saveCart(items) {
     localStorage.setItem(KEY, JSON.stringify({ items, savedAt: Date.now() }));
   }
   
   function loadCart() {
     try {
       const raw = JSON.parse(localStorage.getItem(KEY) || 'null');
       if (!raw || Date.now() - raw.savedAt > TTL) return [];
       return raw.items;
     } catch {
       localStorage.removeItem(KEY);
       return [];
     }
   }

Časté omyly

MýtusLocalStorage je bezpečnější než cookies, protože se neposílá na server.

Ve skutečnostiLocalStorage je čitelné jakýmkoli JavaScriptem běžícím na stránce, takže jediné XSS vydá celý obsah útočníkovi. Cookie s příznakem HttpOnly je pro přihlašovací tokeny naopak nedostupná ze skriptu, a tedy odolnější.

MýtusNa LocalStorage se nevztahuje souhlas s cookies.

Ve skutečnostiEvropská pravidla o přístupu k informacím v koncovém zařízení jsou technologicky neutrální. Uložení identifikátoru pro analytiku nebo reklamu do LocalStorage vyžaduje souhlas stejně jako marketingová cookie; bez souhlasu projdou jen nezbytné technické záznamy.

MýtusLocalStorage má vždycky 5 MB, na které se dá spolehnout.

Ve skutečnostiLimit není v žádné normě pevně daný, liší se podle prohlížeče a prohlížeč může data málo navštěvovaných webů uvolnit při nedostatku místa. Překročení kvóty vyhodí výjimku QuotaExceededError, kterou je nutné odchytit.

Časté dotazy

Kdy použít LocalStorage a kdy raději IndexedDB?

LocalStorage se hodí na malé množství jednoduchých řetězcových hodnot: nastavení jazyka, motiv, poslední zvolený filtr, rozpracovaný formulář. Jakmile jde o desítky megabajtů, binární data typu obrázků, nebo o strukturu, v níž je potřeba vyhledávat podle více klíčů, je správnou volbou IndexedDB. IndexedDB je asynchronní, neblokuje hlavní vlákno a je dostupná i z Web Workeru. Praktické pravidlo zní: pokud hodnota nepřesáhne jednotky kilobajtů a čte se jednorázově při startu aplikace, LocalStorage stačí a je výrazně jednodušší na použití.

Jak LocalStorage funguje v anonymním režimu prohlížeče?

LocalStorage je v anonymním okně dostupné, ale izolované od běžného profilu a smazané při zavření celé anonymní relace. Aplikace tedy nevidí data uložená v normálním okně a naopak. Některé prohlížeče navíc v přísném režimu ochrany soukromí přístup k úložišti u vloženého obsahu třetích stran zcela blokují a volání setItem skončí výjimkou. Kód by proto měl přístup k úložišti obalit blokem try a mít funkční záložní chování, když zápis selže.

Proč se hodnota z LocalStorage vrací jako řetězec?

LocalStorage je definované jako mapa řetězec na řetězec, jiný datový typ neukládá. Prohlížeč každou hodnotu před uložením převede na řetězec, takže číslo 42 se vrátí jako "42" a objekt jako "[object Object]". Pro strukturovaná data je nutné použít JSON.stringify při zápisu a JSON.parse při čtení. Parsování je vhodné obalit blokem try, protože poškozený nebo ručně upravený záznam vyhodí výjimku a shodil by celou aplikaci hned při startu.

Lze zjistit, že jiná záložka zapsala do LocalStorage?

Prohlížeč při zápisu vyvolá událost storage ve všech ostatních oknech a záložkách stejného původu; okno, které změnu provedlo, událost nedostane. Objekt události nese klíč, starou a novou hodnotu i adresu stránky, která zápis provedla. Typické využití je synchronní odhlášení: jedna záložka smaže záznam o session a ostatní na to okamžitě zareagují přesměrováním na přihlášení. Stejným způsobem se dá přepnout barevný motiv nebo zneplatnit lokální mezipaměť bez dotazu na server.

Zdroje

1. Window.localStorage(otevře se v novém okně)MDN Web Docs
2. HTML Standard: Web storage(otevře se v novém okně)WHATWG
3. Web Storage API(otevře se v novém okně)MDN Web Docs
4. HTML Living Standard(otevře se v novém okně)WHATWG
5. Web Storage(otevře se v novém okně)Wikipedia

Související pojmy

• CookieCookie je malý údaj, který web uloží v prohlížeči a prohlížeč jej při dalších požadavcích posílá zpět příslušnému webu. Používá se pro přihlášení, nastavení, košík, analytiku i reklamu. Bezpečné použití závisí na atributech jako Secure, HttpOnly, SameSite, expirace a správném souhlasu uživatele.
• Service WorkerService Worker je skript prohlížeče, který běží na pozadí mimo stránku a funguje jako programovatelný proxy server mezi webovou aplikací a sítí. Zachytává odchozí požadavky, může na ně odpovědět z mezipaměti Cache Storage, a díky tomu umožňuje offline režim, rychlejší načítání i příjem push notifikací bez otevřené záložky.
• XSSXSS je zranitelnost webové aplikace, při které se útočníkovi podaří dostat vlastní JavaScript do stránky zobrazené jinému uživateli. Prohlížeč pak skript spustí v důvěryhodném kontextu napadeného webu, takže může číst obsah stránky, zneužít relaci, měnit formuláře nebo odesílat akce jménem oběti.
• Opuštěný košíkOpuštěný košík je situace v e-commerce, kdy zákazník vloží produkt do nákupního košíku, ale objednávku nedokončí. Metrika pomáhá odhalit tření v nákupním procesu, například drahou dopravu, povinnou registraci, pomalou platbu nebo nedůvěru. Hodí se pro UX analýzu, remarketing i odhad ztracených tržeb bez automatického závěru, že každý košík šlo zachránit.
• Souhlas s cookiesSouhlas s cookies je prokazatelná volba návštěvníka webu, zda smí provozovatel ukládat nebo číst cookies a podobné identifikátory, které nejsou nezbytné pro poskytování služby. V praxi rozhoduje hlavně o analytice, personalizaci, reklamě a konkrétních návazných skriptech třetích stran na stránce.
• 3D model3D model je digitální reprezentace objektu nebo prostoru ve třech rozměrech, složená z geometrie, materiálů a často i textur, animací či fyzikálních vlastností. Používá se v hrách, filmech, průmyslovém návrhu, architektuře, e-commerce i simulacích, kde software z modelu počítá zobrazení nebo další data.
• 3-D Secure3-D Secure je protokol, který u online platby kartou ověří, že platí skutečně její držitel, typicky potvrzením v bankovní aplikaci. Při úspěšném ověření se zároveň přenáší odpovědnost za podvodnou transakci z obchodníka na vydavatele karty.
• ACIDACID je sada čtyř vlastností databázové transakce: atomicity, consistency, isolation a durability. Zaručuje, že skupina zápisů proběhne jako jeden celek, neporuší definovaná pravidla databáze, nebude se nebezpečně míchat s jinými transakcemi a po potvrzení přežije pád systému, například při převodu peněz.