Tomasz Wiktorski - DevNotes

Ostatnio w pracy zastanawiałem się nad możliwością przechowywania większej ilości danych po stronie użytkownika. Standardową metoda magazynowania informacji jest używanie Cookies. Mają one jednak znaczące ograniczenie wielkości – jak dobrze pamiętam 4kB, co prawda można zaserwować ich większą ilość, ale wprowadzamy tym tylko zamieszanie, nie wspominając już o ograniczeniach przeglądarek do ich ilości (Firefox około 50 sztuk, Opera jeszcze mniej).

Na rynku istnieje już od dłuższego czasu rozwiązanie Google o nazwie Gears, lecz jest to dodatek do przeglądarki. Jak wiadomo użytkownicy niechętnie instalują kolejne rozszerzenia. Druga sprawa to Google Gears jest kombajnem którego nie potrzebowałem.

Całe szczęście przy głośnym ostatnio definitywnym zatrzymaniu prac nad XHTML 2.0, a postawieniem na rozwój HTML5, dotarła do mnie informacja o nowościach w tym drugim. Dodatkowo ukazała się nowa wersja Firefoxa 3.5 który powoli dąży do wprowadzenia nowin zawartych w specyfikacji HTML5.


DOM Storage jest mechanizmem zawartym w specyfikacji HTML w werji 5. Jest to niesamowita innowacja w metodach przechowywania informacji po stronie użytkownika. Element localStorage daje nam banalny sposób przechowywania danych po stronie użytkownika. Nie dość że mamy do dyspozycji aż 5 megabajtów (domyślnie w Firefoxie), to te dane nie są przesyłana wraz z żądaniem przez protokół HTTP (w przeciwieństwie do ciasteczek).

Interfejs Storage przedstawia się w następujący sposób:

interface Storage {

  readonly attribute unsigned long length;

  [IndexGetter] DOMString key(in unsigned long index);

  [NameGetter] DOMString getItem(in DOMString key);

  [NameSetter] void setItem(in DOMString key, in DOMString data);

  [NameDeleter] void removeItem(in DOMString key);

  void clear();

};

Tak naprawdę jest to jeszcze prostszy sposób dostępu do danych niż Cookies.

localStorage.setItem('key', ‘value’); /* ustalenie wartości dla klycza */

someData = = localStorage.getItem('key'); /* pobranie wartości konkretnego klucza */



localStorage.removeItem(‘key’); /* usunięcie wartości konkretnego klucza */



storage.clear(); /* Wyczyszczenie całego magazynu */

I to tylko tyle! Nic więcej. To cała prostota mechanizmu, bez żadnych kombinacji, tworzenia dodatkowych upraszczających funkcji. Można jeszcze wspomnieć ze po localStorage można się poruszać jak po zwykłym obiekcie poprzez localStorage.key = value;


Gdyby zapis danych do magazynu nie powiódł się zostanie wyrzucony wyjątek (QUOTA_EXCEEDED_ERR) – może się to stać gdy użytkownik ma wyłączona obsługę magazynu, lub przekroczył domyślną pojemność.


Niestety mechanizm Web Storage jest częścią jeszcze nie skończonej wersji HTML5 dlatego może ulegać jeszcze zmianą. W poprzednich wersjach Firefoxa (<3.5) występował mechanizm GlobalStorage, trochę inny od obecnej wersji. Różnica polegała na podaniu dodatkowo jeszcze hosta dla jakiego ma być dostępny magazyn:

globalStorage['wiktorski.us'].foo='bar';

Dzięki temu można było definiować magazyn dla subdomen, lub nawet udostępniać go dla wszystkich globalStorage[''].foo='bar'; Jednak z powodów bezpieczeństwa zrezygnowano z tej metody.


Nie wszystko jednak jest takie różowe jak mogło by się wydawać. Mechanizm w podanej powyżej formie jest dostępny w najnowszej wersji Firefoxa oraz IE8. Opera niestety nie dysponuje tą funkcjonalnością. Poprzednie wersje Firefoxa - od 2.0 - posiadają mechanizm globalny, a poprzednie wersje przeglądarki Microsoftu mechanizm userData – znacznie różniący się w stosowaniu.

W sieci można również znaleźć biblioteki pomocne w korzystaniu z mechanizmów magazynowania danych. Na uwagę na pewno zasługuję jStore – plugin do jQuery. Łączy on funkcjonalności różnych mechanizmów przechowywania danych (local, session, gears, flash, html5, ie), dając jeden interfejs. Sam wykrywa możliwości przeglądarki i używa najodpowiedniejszego sposobu na przechowywanie danych.

Inne, JavaScript