LocalStorage a Lockr

Ukládání dat v prohlížeči uživatele bylo komplikované. Jediná možnost bylo využití cookies, které ale se posílaly s každým requstem a pro velké data to vhodné vůbec nebylo. Ty doby jsou ale dávno pryč, a nyní existuje LocalStorage.

Jak na to s Lockrem

LocalStorage má jednu velkou nevýhodu, dokáže uchovávat pouze text. Pokud je tedy potřeba uložit něco více, musí se data převést třeba do JSONu a poté uložit. Data se dají uchovávat pouze jako dvojice klíč-hodnota, což už ale takový problém není.

Knihovna Lockr naštěstí hodně těchto problémů řeší. Je možné ukládat i složité objekty a jako bonus také pole unikátních hodnot (set). Vše navíc lze oddělovat pomocí prefixu, který je automaticky přidán na začátek klíčů, takže se dají jednotlivá data oddělovat do podskupin.

// Jednoduchá ukázka
Lockr.prefix = "blog_";
Lockr.set("komentar", {name: "Pavel", obsah:"<p>Obsah komentáře</p>"});
Lockr.get("komentar");
Lockr.getAll();

Možností využití LocalStorage je hodně, nejčastější je ale ukládání hodnot z formuláře pro opětovné doplnění v případě nechtěného znovunačtení stránky, nebo zavření prohlížeče.

Omezení a SessionStorage

To, že hodnota může být pouze text se díky možnosti serializace JSONem mezi omezení počítá jen trochu. Další omezení je kapacitní. Každý prohlížeč má samozřejmě limity různé, ale téměř jistě je tak možné ukládat až 5 MB dat na jednu doménu. Ve většině případů je toto číslo ale až 2x vyšší. Data jsou dostupné pouze v rámci dané domény, pod kterou byly uloženy. A subdoména se počítá, jako jiná doména, takže nelze takto data sdílet mezi subdoménami.

LocalStorage bohužel nemá žádnou expirační dobu, jako je tomu třeba u cookies. Proto je potřeba si data hlídat ručně a případně je mazat. Existuje ale ještě jedna možnost, a tou je SessionStorage. Práce se SessionStorage je stejná jako s LocalStorage, jen při vypršení sezení dojde k jejímu vymazání. Bohužel Lockr umí pracovat pouze s LocalStorage.

// Práce s LocalStorage bez Lockru
localStorage.setItem("komentar", "Zde objekt být nemůže");
localStorage.getItem("komentar");

// Práce se SessionStorage
sessionStorage.setItem("komentar", "Zde objekt být nemůže");
sessionStorage.getItem("komentar");

---

Osobní zkušenosti nebo tipy pro práci s LocalStorage můžete sdílet v komentářích