Internet Explorer 9 - HTML5 - WebStorage

Autor: Marcin Borecki

Opublikowano: 2011-09-06

Wprowadzenie

HTML5 Storage to mechanizm, który pozwala na przechowywanie danych serwisów internetowych wprost w przeglądarce internetowej. Mechanizm jest podobny do cookie, lecz WebStorage przechowuje dane tylko w przeglądarce i nie wysyła ich przy każdym żądaniu, jak robi to mechanizm cookie. Kolejną różnicą jest wielkość magazynu, WebStorage pozwala na przechowanie od 5MB do 10MB danych w zależności od przeglądarki internetowej, a cookie tylko 4kb.

W artykule zapoznamy się z mechanizmem przechowywania danych w WebStorage, nauczymy się dodawać obiekty, odczytywać je oraz kasować zawartość zbioru.

LocalStorage

Reprezentowany jest przez obiekt localStorage. Pozwala na przechowywanie danych strony pomiędzy różnymi sesjami użytkownika. Użytkownik strony przy każdym ponownym wejściu na nią udostępnia serwisowi dane zapisane w zbiorze danych danej witryny. Witryny dzięki temu mogą przechowywać dane bez potrzeby zapisywania ich na serwerze. Należy jednak pamiętać, że dane te nie będą dostępne w innej przeglądarce, dlatego naprawdę ważne dane należy zawsze zapisywać na serwerze.

SessionStorage

Reprezentowany jest przez obiekt sessionStorage. Pozwala na przechowywanie danych strony dla aktualnej sesji, dane nie są współdzielone nawet między instancjami przeglądarki internetowej. Jedyny wyjątek stanowi uruchomienie podstrony z aktualnie przeglądanego serwisu, wtedy sessionStorage zostaje przekopiowany do nowego okna.

Elementy wspólne

setItem(klucz,wartość)	Dodajemy obiekt z wartością do podanego klucza.
getItem(klucz)	Pobieramy obiekt będący pod podanym kluczem.
clear()	Czyścimy zbiór danych.
removeItem(klucz)	Usuwamy obiekt pod podanym kluczem.
key(i)	Pobieramy obiekt o danym numerze, który znajduje się w zbiorze – używamy go przy iterowaniu po elementach.

Przykład

Poniżej znajduje się przykład użycia sessionStorage, w identyczny sposób używa się localStorage.

sessionStorage.setItem("title", "Mój artykuł");
sessionStorage.setItem("body", "Super treść");

var title = sessionStorage.getItem("title");
var body  = sessionStorage.getItem("body");

sessionStorage.clear();

Podsumowanie

Mechanizm WebStorage jest niezwykle prosty, ale przy odpowiednim użyciu bardzo efektywny. Jego niewątpliwą zaletą jest duży zbiór danych, jaki możemy przechowywać po stronie klienta, w przeglądarce internetowej. Należy jednak pamiętać, że dane będą przechowywane tylko po stronie klienta i dostępne z JavaScript. Jeżeli potrzebujemy mechanizmu do przechowywania danych tymczasowych, który będzie dostępny zarówno po stronie klienta jak i serwera, należy używać plików cookie.

 

---