DOM Storage - JavaScript Web Storage - javascript-html5-tutorial.pl

javascript-html5-tutorial.pl

DOM Storage – JavaScript Web Storage

28 września, 2014

Dominik-W

W aplikacjach WWW z zapleczem server-side to żaden problem. Możemy przechowywać dane w bazie np. MySQL, czy też zwyczajnie w plikach. Dzięki Web storage / DOM storage, nasza nowoczesna aplikacja web może przechowywać dane samodzielnie, a my będziemy na nich operować w samym JavaScript.

JavaScript Web Storage

Jest to część specyfikacji HTML5. Przez web storage rozumiemy metody i protokoły pozwalające na przechowywanie danych lokalnie – „w przeglądarce”. Podobnie jak w przypadku mechanizmu cookies; jednak web storage dostarcza większych możliwości, w tym większej pojemności dostępnej na nasze dane.

W dużym uproszczeniu można potraktować web storage jako ulepszone cookies, jednak oba mechanizmy różnią się w kluczowych kwestiach. Niektórzy zwą to wręcz super-cookie.

Cookies są dostępne zarówno z poziomu front (client-side) jak i server-side (np. język PHP). Web storage zarezerwowany jest tylko dla client-side scripting.

Wielkość magazynu danych to zwykle od kilku do kilkunastu MB.

Użycie Web Storage – JavaScript

Mamy magazyn lokalny i magazyn sesji. Przeglądarki posiadające wsparcie dla web storage mają zadeklarowane globalnie zmienne sessionStorage oraz localStorage.

Dla sessionStorage dane ustawiane są na czas trwania sesji.

Przykład – ustawienie i pobranie danych z sessionStorage:

// set
sessionStorage.setItem('key', 'JavaScript Web Storage!');

// get
alert(sessionStorage.getItem('key'));

Podobnie sytuacja wygląda w przypadku localStorage.

Przykład – ustawienie i pobranie danych z localStorage:

// set
localStorage.setItem('test', 'Local storage!');

// get
alert(localStorage.getItem('test'));

Prosto i przyjemnie.

Ilość pozycji przechowywanych w localStorage określimy dzięki właściwości localStorage.length. Tym samym prosto możemy odwołać się do wszystkich zapisanych danych.

Przykład:

var output = "DATA:\n-----\n";
if (window.localStorage) {
  if (localStorage.length) {
    for (var i = 0; i < localStorage.length; i++) {
      output += localStorage.key(i) + ': ' 
        + localStorage.getItem(localStorage.key(i)) + '\n';
    }
  }
}
console.log(output);

Przykładowy rezultat:

DATA:
—–
test: Local storage!
test2: Foo bar

Przykładowy kod na GitHubie:

https://github.com/dominik-w/js_html5_com/blob/master/web-storage-demo.html

Do sprawdzania czy funkcjonalność localStorage jest dostępna w naszej przeglądarce, możemy także użyć biblioteki Modernizr:

if (Modernizr.localstorage) {
  // ...
}

Typy danych

W web storage przechowujemy pary klucz-wartość. Zarówno klucze jak i wartości są typu łańcuchowego (string). Możemy nasze dane przechowywać jako JSON:

localStorage.setItem('key', JSON.stringify({name: 'myval'}));
alert(JSON.parse(localStorage.getItem('key')).name);

Kolejny przykład to prosty licznik kliknięć, których ilość jest spisywana:

if (localStorage.cnt) {
    localStorage.cnt = Number(localStorage.cnt) + 1;
} else {
    localStorage.cnt = 1;
}
document.getElementById("result").innerHTML = "You clicked " +
  localStorage.cnt + " time(s)";

Mechanizm jest prosty i skuteczny.

Właściwości i metody JavaScript DOM Storage

Obiekt DOM Storage dostarcza jedynie kilku metod i właściwości.

Metody

– getItem(key) – zwraca zawartość przechowywaną pod danym kluczem; jeśli dla danego klucza nie istnieje wartość, zostanie zwrócony null

– setItem(key, value) – zapisuje wartość ciągu pod zadanym kluczem; jeśli taki klucz istnieje, poprzednia wartość zostaje zastąpiona przez nową

– removeItem(key) – usuwa wartość przechowywaną pod danym kluczem w magazynie DOM

– key(index) – zwraca nazwę klucza dla elementu o podanym indeksie – liczba całkowita, która odpowiada pozycji w indeksie; pozycja może się zmieniać wraz z dodawaniem / usuwaniem elementów

– clear() – usuwa wszystkie dane z obszaru DOM Storage dla bieżącej domeny

Właściwości

length – własność tylko do odczytu, która zwraca liczbę elementów w danym magazynie DOM