Dajbych.net


HTML5 a Local Storage

, 6 minut čtení

Lo­cal Stor­age je úložiště, které posky­tuje in­ter­ne­tový proh­lížeč we­bové stránce. Ste­jně jako u cook­ies se data uk­lá­dají ve formě klíč – hod­nota. Pod­s­tatný rozdíl je však v tom, že cook­ies posílají svá data v každém HTTP poža­davku. Data v Lo­cal Stor­age jsou dos­tupná jen u klienta přes JavaScript. Není zde omezen počet klíčů a plat­nost dat nevyprší. Data jsou navíc sdílená mezi více okny téhož proh­lížeče, což pro data v cook­ies ne­platí, pokud tuto funk­cion­al­itu neob­s­tarává server.

Lo­cal Stor­age má něko­lik názvů. Pokud budete číst o DOM stor­age či Global stor­age, jedná se o totéž (v pří­padě Global stor­age jen čtete starou speci­fikaci). Tech­nika user­Data per­sis­tence je trošku jiná časnější im­ple­men­tace ste­jné myšlenky v IE, dos­tupá od verze 6. Naopak SQL stor­age či Google Gears oz­načují místní databázi, dos­tup­nou přes JavasS­cript, s funk­cion­alitou databáze SQLite. Souhrnně se tyto tech­niky nazý­vají Of­fline stor­age a jedná se o část speci­fikace HTML5.

Tak to bylo jen pro upřes­nění a neb­udu už zdržo­vat od toho ne­jdů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ý ob­jekt, který kýže­nou funk­cion­al­itu zpřís­tupňuje, se nazývá lo­cal­S­tor­age. Jeho me­tody popisuje násle­du­jící tab­ulka.

návra­tový typme­todaar­gu­mentypopis
voidlo­cal­S­tor­age. clear()smaže vešk­erý ob­sah
voidlo­cal­S­tor­age.setItem(string klíč, string hod­nota)vloží prvek s klíčem
stringlo­cal­S­tor­age.getItem(string klíč)vrátí prvek pod klíčem
voidlo­cal­S­tor­age.re­moveItem(string klíč)ode­bere prvek s klíčem
stringlo­cal­S­tor­age.key(int pořadí)vrátí název n-tého klíče
intlo­cal­S­tor­age.lengthvrátí počet klíčů
intlo­cal­S­tor­age. re­main­ingS­pacevrátí počet vol­ných ba­jtů

Data zap­saná z we­bové stránky z jedné domény ne­j­sou dos­tupná stránkám na doménách ostat­ních. In­ter­net Ex­plorer posky­tuje 10 MB pros­toru pro doménu, Fire­fox 5 MB a Opera 3 MB. Přidělení většího pros­toru musí potvrdit uži­va­tel. Me­toda re­main­ingS­pace vrací počet vol­ných ba­jtů na disku či v kvótě, niko­liv počet ba­jtů, které je ještě možné zap­sat, než se uži­vateli zo­brazí výzva k přidělení většího pros­toru.

Přesto že im­ple­men­tace Lo­cal Stor­age může být ze strany proh­lížeče kval­itní, ne­jedná se o nic spoleh­livější úložiště, než cookie. Stačí, aby uži­va­tel nain­stalo­val novější verzi OS, nebo změnil proh­lížeč, a data se ztratí. Přesto se Lo­cal Stor­age výborně hodí na nice-to-have fea­tury. Když daná funk­cion­alita chybí, prostě se nic neděje, uži­va­tel jen neb­ude mít takový kom­fort.

Pro in­spiraci popíšu jedno z možných použití Lo­cal Storage, které mění způ­sob přís­tupu k in­for­ma­cím na blogu a které je zde im­ple­men­továno. Často se stává, že je potřeba článek na blogu upravit. Buď jsou dos­tupné nové rozšiřu­jící in­for­mace o ně­jaké tech­nologii, nebo se třeba jedná o pozvání na kon­ferenci a je třeba dát vědět, že se klíčový řečník ne­dostaví kvůli sopečnému prachu v at­mos­féře, který ucpává ch­ladící prů­duchy leteckých mo­torů (jen tak mi­mo­cho­dem kabina je přet­lako­vaná právě od nich). Větši­nou se vydá nový článek, který ob­sahuje do­plňu­jící in­for­mace. Starý článek už je totiž oz­načen jako přečtený v RSS čtečkách uži­vatelů a znovu se ne­zo­brazí, nepoužije-li se správně RSS. Starý článek někdy od­kazuje na novější in­for­mace, někdy ne. V obou pří­padech to uži­vatele mate, v prvním méně, v druhém více. Další prob­lém je odlišení nového textu od starého. HTML s tím sice počítá a umožňuje přeškrt­nout starý text, je však velmi těžké provést změnu tak, aby se článek dal plynule číst a zároveň uži­va­tel na první poh­led viděl, co se změnilo.

Proto jsem se rozhodl ušetřit uži­vateli námahu a za­pam­a­to­vat si ob­sah přečtených článků za něj. Tedy po ně­jakém času stráveném na stránce, který zhruba od­povídá času potřeb­nému k rych­lému přečtení článku, se do Lo­cal Stor­age uloží text článku. Pokud uži­va­tel navštíví článek znovu, JavaScript porovná text uloženého článku s tex­tem na stránce a zvýrazní upravené či při­dané od­s­tavce. Napřík­lad na tomto blogu se vpravo od od­s­tavce zo­brazí svislý pruh s nápisem Upraveno.

Na porovnávání textu je nutné použít vhodný al­gorit­mus. Úplné počítání změn je výpočetně náročné a pouhý hash nepozná, opravil-li se jen přek­lep, nebo se vložila nová věta. Proto jsem zvo­lil al­gorit­mus Sift3 od Siderita Zack­we­hdexe, který počítá odlišnosti jen do určitého okolí, čímž výrazně sníží počet porovnávání.

Nezbyt­nou součástí to­hoto řešení je správná konzu­mace článků gen­erá­torem in­for­mačního kanálu. V pří­padě RSS je potřeba si oh­lí­dat, že v el­e­mentu <item> reprezen­tu­jící článek, se po ak­tu­al­izaci článku změní ob­sah el­e­mentu <guid>. Do to­hoto el­e­mentu se obyče­jně vk­ládá URL článku a im­plic­itně se s tím počítá. Není však chybné použít <guid is­Perma­Link="false"> a umístit do něj napřík­lad hash počí­taný z URL článku a data změny, nebo vložit da­tum změny do query seg­mentu URL. Prostě jen aby RSS čtečka poz­nala, že byl článek upraven. RSS totiž na rozdíl od for­mátu Atom el­e­ment <up­dated> nezná.

Na tech­nických blozích bývá článků k jedné tech­nologii zpravidla více. Pokud ne­j­sou články svázány do ser­iálu a pod článkem nejsou od­kazy i na novější díly, je těžké doh­le­dat sou­vise­jící in­for­mace. Au­toři z obavy, že si nového ob­sahu ve starém článku nikdo nevšimne, raději napíší článek nový. Lo­cal Stor­age umožňuje tento ne­duh le­hce od­s­tranit.