
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
Zasoby dodatkowe
– opis na MDN
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
– opis w podręczniku HTML5
http://diveintohtml5.info/storage.html
– tutorial: tworzenie książki adresowej w oparciu o Web Storage
Podsumowanie
W przypadku Web Storage otrzymaliśmy małe rozszerzenie będące sporym udogodnieniem w programowaniu nowoczesnych aplikacji WWW.
localStorage.setItem(’thanks', 'Dziękuję za uwagę');