Dajbych.net


HTML5 a Local Storage

, 7 minut čtení

Lo­cal Sto­rage je úlo­žiště, které po­sky­tuje in­ter­ne­tový pro­hlí­žeč we­bové stránce. Stejně jako u co­o­kies se data uklá­dají ve formě klíč – hod­nota. Pod­statný roz­díl je však v tom, že co­o­kies po­sílají svá data v kaž­dém HTTP po­ža­davku. Data v Lo­cal Sto­rage jsou do­stupná jen u kli­enta přes Ja­vaScript. Není zde ome­zen po­čet klíčů a plat­nost dat ne­vy­prší. Data jsou na­víc sdílená mezi více okny téhož pro­hlí­žeče, což pro data v co­o­kies ne­platí, po­kud tuto funk­ci­o­na­litu ne­ob­sta­rává ser­ver.

Lo­cal Sto­rage má ně­ko­lik ná­zvů. Po­kud bu­dete číst o DOM sto­rage či Glo­bal sto­rage, jedná se o to­též (v pří­padě Glo­bal sto­rage jen čtete sta­rou spe­ci­fi­kaci). Tech­nika user­Data per­si­s­tence je trošku jiná časnější im­ple­men­tace stejné myš­lenky v IE, do­stupá od verze 6. Nao­pak SQL sto­rage či Go­o­gle Gears ozna­čují místní da­ta­bázi, do­stup­nou přes Ja­vasScript, s funk­ci­o­na­litou da­ta­báze SQ­Lite. Sou­hrnně se tyto tech­niky na­zý­vají Of­fline sto­rage a jedná se o část spe­ci­fi­kace HTML5.

Tak to bylo jen pro upřes­nění a ne­budu už zdr­žo­vat od toho nej­dů­le­ži­těj­šího:

if (localStorage) { var data1 = 'zapamatováníhodná data'; var key = 'data'; localStorage.setItem(key, data1); var data2 = localStorage.getItem(key); }

Kou­zelný ob­jekt, který ký­že­nou funk­ci­o­na­litu zpřístup­ňuje, se na­zývá lo­cal­S­to­rage. Jeho me­tody po­pi­suje ná­sle­dující tabulka.

ná­vra­tový typ me­toda ar­gu­menty po­pis
void lo­cal­S­to­rage. clear () smaže veš­kerý ob­sah
void lo­cal­S­to­rage.se­tI­tem (string klíč, string hod­nota) vloží pr­vek s klí­čem
string lo­cal­S­to­rage.ge­tI­tem (string klíč) vrátí pr­vek pod klí­čem
void lo­cal­S­to­rage.re­mo­ve­I­tem (string klíč) ode­bere pr­vek s klí­čem
string lo­cal­S­to­rage.key (int po­řadí) vrátí ná­zev n-tého klíče
int lo­cal­S­to­rage.len­gth vrátí po­čet klíčů
int lo­cal­S­to­rage. re­ma­i­ningSpace vrátí po­čet vol­ných bajtů

Data za­psaná z we­bové stránky z jedné do­mény nejsou do­stupná strán­kám na do­mé­nách ostat­ních. In­ter­net Ex­plo­rer po­sky­tuje 10 MB prostoru pro do­ménu, Fi­re­fox 5 MB a Opera 3 MB. Při­dě­lení vět­šího prostoru musí po­tvr­dit uži­va­tel. Me­toda re­ma­i­ningSpace vrací po­čet vol­ných bajtů na disku či v kvótě, ni­ko­liv po­čet bajtů, které je ještě možné za­psat, než se uži­va­teli zob­razí vý­zva k při­dě­lení vět­šího prostoru.

Přesto že im­ple­men­tace Lo­cal Sto­rage může být ze strany pro­hlí­žeče kva­litní, ne­jedná se o nic spo­leh­li­vější úlo­žiště, než co­o­kie. Stačí, aby uži­va­tel na­in­stalo­val no­vější verzi OS, nebo změ­nil pro­hlí­žeč, a data se ztratí. Přesto se Lo­cal Sto­rage vý­borně hodí na nice-to-have fe­a­tury. Když daná funk­ci­o­na­lita chybí, prostě se nic ne­děje, uži­va­tel jen ne­bude mít ta­kový kom­fort.

Pro in­spi­raci po­píšu jedno z mož­ných po­u­žití Lo­cal Sto­rage, které mění způ­sob přístupu k in­for­ma­cím na blogu a které je zde im­ple­men­to­váno. Často se stává, že je po­třeba člá­nek na blogu upra­vit. Buď jsou do­stupné nové roz­ši­řující in­for­mace o ně­jaké tech­no­lo­gii, nebo se třeba jedná o po­zvání na kon­fe­renci a je třeba dát vě­dět, že se klí­čový řeč­ník ne­do­staví kvůli so­peč­nému pra­chu v at­mo­sféře, který ucpává chladící prů­du­chy le­tec­kých mo­torů (jen tak mi­mo­cho­dem ka­bina je pře­tla­ko­vaná právě od nich). Vět­ši­nou se vydá nový člá­nek, který ob­sahuje do­pl­ňující in­for­mace. Starý člá­nek už je totiž ozna­čen jako pře­čtený v RSS čteč­kách uži­va­telů a znovu se ne­zob­razí, ne­po­u­žije-li se správně RSS. Starý člá­nek ně­kdy od­ka­zuje na no­vější in­for­mace, ně­kdy ne. V obou pří­pa­dech to uži­va­tele mate, v prv­ním méně, v druhém více. Další problém je od­li­šení no­vé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é pro­vést změnu tak, aby se člá­nek dal ply­nule číst a zá­ro­veň uži­va­tel na první po­hled vi­děl, co se změ­nilo.

Proto jsem se roz­hodl ušet­řit uži­va­teli ná­mahu a za­pa­ma­to­vat si ob­sah pře­čte­ných článků za něj. Tedy po ně­ja­kém času strá­ve­ném na stránce, který zhruba od­po­vídá času po­třeb­nému k rychlému pře­čtení článku, se do Lo­cal Sto­rage uloží text článku. Po­kud uži­va­tel na­vštíví člá­nek znovu, Ja­vaScript po­rovná text ulo­že­ného článku s tex­tem na stránce a zvýrazní upra­vené či při­dané od­stavce. Napří­klad na tomto blogu se vpravo od od­stavce zob­razí svislý pruh s ná­pi­sem Upra­veno.

Na po­rov­ná­vání textu je nutné po­u­žít vhodný al­go­rit­mus. Úplné po­čítání změn je vý­po­četně ná­ročné a pouhý hash ne­po­zná, opra­vil-li se jen pře­klep, nebo se vlo­žila nová věta. Proto jsem zvo­lil al­go­rit­mus Sift3 od Si­de­rita Zac­kweh­dexe, který po­čítá od­liš­nosti jen do ur­či­tého okolí, čímž výrazně sníží po­čet po­rov­ná­vání.

Ne­zbyt­nou sou­částí to­hoto ře­šení je správná kon­zu­mace článků ge­ne­rá­to­rem in­for­mačního ka­nálu. V pří­padě RSS je po­třeba si ohlí­dat, že v ele­mentu <item> re­pre­zen­tující člá­nek, se po ak­tua­li­zaci článku změní ob­sah ele­mentu <guid>. Do to­hoto ele­mentu se oby­čejně vkládá URL článku a im­pli­citně se s tím po­čítá. Není však chybné po­u­žít <guidisPer­ma­Link="false"> a umís­tit do něj na­pří­klad 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 po­znala, že byl člá­nek upra­ven. RSS totiž na roz­díl od for­mátu Atom ele­ment <up­da­ted> ne­zná.

Na tech­nic­kých blo­zích bývá článků k jedné tech­no­lo­gii zpra­vi­dla více. Po­kud nejsou články svá­zány do se­ri­álu a pod člán­kem nejsou od­kazy i na no­vější díly, je těžké do­hle­dat sou­vi­sející in­for­mace. Au­toři z obavy, že si no­vého ob­sahu ve starém článku ni­kdo ne­všimne, ra­ději na­píší člá­nek nový. Lo­cal Sto­rage umož­ňuje tento ne­duh lehce od­stra­nit.