Lokální úložiště (web storage) v HTML 5

Web Storage umožňuje ukládat informace o relaci u klienta v podobě páru klíč a hodnota ( key / value ). Tato data nejsou přenášena na vzdálený server a tato technologie je implementována prakticky u všech aktuálních verzí prohlížečů a představuje tak jednu z nejvíce podporovaných částí HTML 5. Přesto je ale vhodné vždy před použitím testovat, jestli je Web Storage podporováno u daného prohlížeče (otestováním existence window.sessionStorage a window.localStorage ). Web Storage API je nesmírně jednoduché.

Doposud vývojáři k ukládání informací na klientském počítači používali takzvaných cookies , které mají celou řadu nedostatků jako například neefektivní zahrnutí v každém HTTP požadavku, což může být problém i z hlediska bezpečnosti, výrazné omezení velikosti, nepříjemně se s nimi pracuje, pokud máme otevřených více oken nebo záložek se stejnými stránkami, tak dochází ke sdílení dat (což u některých aplikací není žádoucí).

Je třeba zmínit, že data je možné ukládat i na serveru a provázat je pomocí identifikátoru relace s uživatelem. To ale zcela nemusí odpovídat našim požadavkům.

Web Storage nabízí dva typy úložišť pro uchování dat u klienta:

sessionStorage (dostupné pouze pro dané okno - řeší již zmíněný problém sdílení dat mezi okny nebo záložkami)

localStorage (dostupné pro všechna okna otevřená nad danou doménou i po restartu počítače, dokud nedojde k explicitnímu smazání)

Oba mechanismy podporují stejné interface Storage :

getter DOMString key(in unsigned long index);

getter any getItem(in DOMString key);

setter creator void setItem(in DOMString key, in any data);

deleter void removeItem(in DOMString key);

void clear();

Poznámka : můžeme také použít tečkovou notaci

Web Storage API zahrnuje také mechanismus notifikace o změnách v datech. Interface StorageEvent : Event má následující podobu :

readonly attribute DOMString key;

readonly attribute any oldValue;

readonly attribute any newValue;

readonly attribute DOMString url;

readonly attribute Storage storageArea;

Odkazy:

http://dev.w3.org/html5/webstorage/

http://davidwalsh.name/html5-storage

http://diveintohtml5.org/storage.html

http://www.switchonthecode.com/tutorials/taking-a-dive-into-html5-web-storage

http://www.w3schools.com/html5/html5_webstorage.asp