Poprzednim postem zakończone zostało omawianie przeze mnie programowania stylów elementów HTML5. Teraz, na jakiś czas zostawiamy tematykę związaną z CSS3 i wracamy do tematów związanych z JavaScript. W dzisiejszym poście przechodzimy do następnego celu egzaminu MCSD 70-480. W najbliższych trzech postach zajmiemy się dostępnymi API dostępnymi w HTML5. Będą to kolejno: użycie HTML5 Web Storage, czyli temat niniejszego posta; a także HTML5 AppCache API, oraz Geolocation API.

Na początku były ciasteczka

Za nim wprowadzone zostało API, będące tematem dzisiejszego posta, do przechowywania danych po stronie klienta, wykorzystywane były tzw. ciasteczka (ang. cookies). Rozwiązanie to ma jednak swoje minusy:

Pozwala między innymi na przechwytywanie historii przeglądanych stron i wyszukiwania, przez co możne zostać naruszona prywatność użytkownika.

Poza tym, wiele przeglądarek, opierając się na specyfikacji z (chyba) 1997 roku, wprowadza ograniczenie wielkości ciasteczka - nie może być ono większe niż 4KB (co prawda możliwe jest utworzenie wielu ciasteczek, ale to wciąż pewne ograniczenie)

Ponadto, ciasteczka wprowadzają dodatkowy narzut przesyłu danych, ponieważ przesyłane są wraz każdym żądaniem HTTP.

Wejście Web Storage

Wraz z pojawieniem się HTML5, wprowadzony został nowy sposób na przechowywanie danych po stronie klienta - rzeczone Web Storage. Jest to rozwiązanie znacznie szybsze i wygodniejsze. Dane nie są już przesyłane wraz z każdym żądaniem HTTP, a jedynie wtedy kiedy są rzeczywiście potrzebne. Ponadto możliwe jest przechowywanie znacznie większych ilości danych bez negatywnego wpływu na wydajność aplikacji.

HTML5 wprowadza także API, umożliwiające dostęp do danych za pomocą JavaScript. Dane przechowywane są jako klucz-wartość, a skrypt ma dostęp do danych przechowywanych tylko na stronie, na której jest wywoływany.

Użycie HTML5 Web Storage

Do przechowywania danych w Web Storage, jego API udostępnia dwa obiekty localStorage oraz sessionStorage. Różnią się one czasem “życia” przechowywanych danych:

  • localStorage - dane znajdujące się w tym obiekcie dostępne są pomiędzy sesjami przeglądarki, tzn. mamy do nich dostęp nawet kiedy użytkownik, zamknie a następnie otworzy przeglądarkę/zakładkę
  • sessionStorage - w tym przypadku dane przechowywane są tylko w ramach jednej sesji przeglądarki, kiedy zamkniemy ją, dane zostaną utracone

Podczas korzystania z API Web Storage, powinno się w skrypcie, dokonać sprawdzenia czy dana przeglądarka obsługuje go (większość popularnych przeglądarek już to robi). Można to zrobić w następujący sposób:

if (typeof(Storage)!=="undefined") {
   // Web Storage dostępny
} else {
   // Web Storage nie wspierany
}

Dodawanie elementów i dostęp do localStorage i sessionStorage

Istnieją w zasadzie dwa sposoby na dodawanie i dostęp do danych w obiektach localStorage oraz sessionStorage. Poniżej pierwszy z nich:

sessionStorage.setItem('klucz', 'wartość');
var value = sessionStorage.getItem('klucz');

localStorage.setItem('klucz', 'wartość');
var value = localStorage.getItem('klucz');

Jak widać, obiekty Web Storage są po prostu dostępne dla nas w skrypcie, nie trzeba niczego deklarować itp (to dlatego, że tak na prawdę, są one właściwościami obiektu ‘window’). Ponadto, w przypadku obu obiektów dodawanie i dostęp do danych odbywa się w dokładnie w ten sam sposób. W powyższym przykładzie, wykorzystano do tego funkcje ‘setItem()’ do dodania nowej wartości oraz funkcję ‘getItem()’ do jej pobrania.

Jeszcze jeden sposób…

Jest jeszcze jeden sposób, możemy tworzyć nowe właściwości obiektów Web Storage:

sessionStorage.key = 'wartość';
var value = sessionStorage.key;

localStorage.key = 'wartość';
var value = localStorage.key;

Powyższy przykład działa dokładnie w ten sam sposób jak poprzedni.

Uwaga! Należy pamiętać, że wartości w Web Storage są przechowywane zawsze jako ciągi znaków - w przypadku więc gdy przechowywane są dane innych typów, podczas przypisania są one konwertowane na typ ‘string’. Później, podczas ich użycia musimy pamiętać o odpowiednim rzutowaniu!

Usuwanie z Web Storage

Na koniec jeszcze dwa słowa o usuwaniu wartości z Web Storage. Poniżej przykład:

// usuwanie konkretnej wartości na podstawie klucza
sessionStorage.removeItem('klucz');

// czyszczenie całego storage
sessionStorage.clear();

A więc, jak można było się domyślić, do usuwania danych służy metoda ‘removeItem()’ - jako parametr podajemy klucz. Istnieje też możliwość wyczyszczenia całego “storage” za pomocą funkcji ‘clear()’.

Podgląd Storage w Chrome

Jak słusznie zauważył jeden z czytelników w komentarzach, warto dodać do tego wpisu jeszcze jeden element… Przydaje się on na przykład podczas debugowania kodu.

Otóż, zarówno localStorage jak i sessionStorage możliwe są do podglądu w przeglądarce internetowej. Dla przykładu, w przeglądarce Chrome, podgląd ten dostępny jest z poziomu narzędzie developerskich, w zakładce Application:

chrome - podgląd storage

Jeśli używasz innej przeglądarki internetowej to oczywiście tam również (na 98%) jest dostępny taki podgląd!

Podsumowanie

Myślę, że na koniec należy wspomnieć, że użycie HTML5 Web Storage nie jest wcale bezpieczniejsze od zastosowania ciasteczek, dlatego nadal przechowywanie w nim wrażliwych danych takich jak hasła użytkowników nie jest dobrym pomysłem.

W następnym poście zajmiemy się HTML5 AppCache API. Zapraszam!