Local Storage je úložiště, které poskytuje internetový prohlížeč webové stránce. Stejně jako u cookies se data ukládají ve formě klíč – hodnota. Podstatný rozdíl je však v tom, že cookies posílají svá data v každém HTTP požadavku. Data v Local Storage jsou dostupná jen u klienta přes JavaScript. Není zde omezen počet klíčů a platnost dat nevyprší. Data jsou navíc sdílená mezi více okny téhož prohlížeče, což pro data v cookies neplatí, pokud tuto funkcionalitu neobstarává server.
Local Storage má několik názvů. Pokud budete číst o DOM storage či Global storage, jedná se o totéž (v případě Global storage jen čtete starou specifikaci). Technika userData persistence je trošku jiná časnější implementace stejné myšlenky v IE, dostupá od verze 6. Naopak SQL storage či Google Gears označují místní databázi, dostupnou přes JavasScript, s funkcionalitou databáze SQLite. Souhrnně se tyto techniky nazývají Offline storage a jedná se o část specifikace HTML5.
Tak to bylo jen pro upřesnění a nebudu už zdržovat od toho nejdůležitějšího:
if (localStorage) {
var data1 = 'zapamatováníhodná data';
var key = 'data';
localStorage.setItem(key, data1);
var data2 = localStorage.getItem(key);
}
Kouzelný objekt, který kýženou funkcionalitu zpřístupňuje, se nazývá localStorage. Jeho metody popisuje následující tabulka.
| návratový typ | metoda | argumenty | popis |
|---|---|---|---|
| void | localStorage. clear | () | smaže veškerý obsah |
| void | localStorage.setItem | (string klíč, string hodnota) | vloží prvek s klíčem |
| string | localStorage.getItem | (string klíč) | vrátí prvek pod klíčem |
| void | localStorage.removeItem | (string klíč) | odebere prvek s klíčem |
| string | localStorage.key | (int pořadí) | vrátí název n-tého klíče |
| int | localStorage.length | vrátí počet klíčů | |
| int | localStorage. remainingSpace | vrátí počet volných bajtů |
Data zapsaná z webové stránky z jedné domény nejsou dostupná stránkám na doménách ostatních. Internet Explorer poskytuje 10 MB prostoru pro doménu, Firefox 5 MB a Opera 3 MB. Přidělení většího prostoru musí potvrdit uživatel. Metoda remainingSpace vrací počet volných bajtů na disku či v kvótě, nikoliv počet bajtů, které je ještě možné zapsat, než se uživateli zobrazí výzva k přidělení většího prostoru.
Přesto že implementace Local Storage může být ze strany prohlížeče kvalitní, nejedná se o nic spolehlivější úložiště, než cookie. Stačí, aby uživatel nainstaloval novější verzi OS, nebo změnil prohlížeč, a data se ztratí. Přesto se Local Storage výborně hodí na nice-to-have featury. Když daná funkcionalita chybí, prostě se nic neděje, uživatel jen nebude mít takový komfort.
Pro inspiraci popíšu jedno z možných použití Local Storage, které mění způsob přístupu k informacím na blogu a které je zde implementováno. Často se stává, že je potřeba článek na blogu upravit. Buď jsou dostupné nové rozšiřující informace o nějaké technologii, nebo se třeba jedná o pozvání na konferenci a je třeba dát vědět, že se klíčový řečník nedostaví kvůli sopečnému prachu v atmosféře, který ucpává chladící průduchy leteckých motorů (jen tak mimochodem kabina je přetlakovaná právě od nich). Většinou se vydá nový článek, který obsahuje doplňující informace. Starý článek už je totiž označen jako přečtený v RSS čtečkách uživatelů a znovu se nezobrazí, nepoužije-li se správně RSS. Starý článek někdy odkazuje na novější informace, někdy ne. V obou případech to uživatele mate, v prvním méně, v druhém více. Další problém je odlišení nového textu od starého. HTML s tím sice počítá a umožňuje přeškrtnout starý text, je však velmi těžké provést změnu tak, aby se článek dal plynule číst a zároveň uživatel na první pohled viděl, co se změnilo.
Proto jsem se rozhodl ušetřit uživateli námahu a zapamatovat si obsah přečtených článků za něj. Tedy po nějakém času stráveném na stránce, který zhruba odpovídá času potřebnému k rychlému přečtení článku, se do Local Storage uloží text článku. Pokud uživatel navštíví článek znovu, JavaScript porovná text uloženého článku s textem na stránce a zvýrazní upravené či přidané odstavce. Například na tomto blogu se vpravo od odstavce zobrazí svislý pruh s nápisem Upraveno.
Na porovnávání textu je nutné použít vhodný algoritmus. Úplné počítání změn je výpočetně náročné a pouhý hash nepozná, opravil-li se jen překlep, nebo se vložila nová věta. Proto jsem zvolil algoritmus Sift3 od Siderita Zackwehdexe, který počítá odlišnosti jen do určitého okolí, čímž výrazně sníží počet porovnávání.
Nezbytnou součástí tohoto řešení je správná konzumace článků generátorem informačního kanálu. V případě RSS je potřeba si ohlídat, že v elementu <item> reprezentující článek, se po aktualizaci článku změní obsah elementu <guid>. Do tohoto elementu se obyčejně vkládá URL článku a implicitně se s tím počítá. Není však chybné použít <guid isPermaLink="false"> a umístit do něj například hash počítaný z URL článku a data změny, nebo vložit datum změny do query segmentu URL. Prostě jen aby RSS čtečka poznala, že byl článek upraven. RSS totiž na rozdíl od formátu Atom element <updated> nezná.
Na technických blozích bývá článků k jedné technologii zpravidla více. Pokud nejsou články svázány do seriálu a pod článkem nejsou odkazy i na novější díly, je těžké dohledat související informace. Autoři z obavy, že si nového obsahu ve starém článku nikdo nevšimne, raději napíší článek nový. Local Storage umožňuje tento neduh lehce odstranit.