Zwyczajowo kiedy myślimy o przechowywaniu pewnych informacji po stronie użytkownika ograniczeni jesteśmy, ze względu na starsze przeglądarki do plików cookie. Jednakże nowoczesne przeglądarki w coraz większym stopniu wprowadzają nowe rozwiązania. Jednym z nich, zgodnym z projektem specyfikacji HTML jest “local storage”. Jeżeli spojrzymy na niego wydaję się niczym więcej jak większym plikiem cookie (nawet do 5MB). Różni go to(poza rozmiarem), że nie ma ograniczonego czasu wygaśnięcia i jest obsługiwane jedynie po stronie klienta (serwer nie ma do nich dostępu). Dzięki wykorzystaniu tej funkcjonalności nasze aplikacji mogą być mniej zależne od połączenia z internetem, a przypadku nowoczesnych komórek(iPhone, Android) jesteśmy w stanie stworzyć aplikację działające w pełni w trybie offline. Przejdźmy jednak do małego przykładu. Naszym zdaniem jest stworzenie prostej listy “to do”. Zaczynamy od HTML-a:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Local storage</title>
</head>
<body>
<header>
<h1>Simple To-do list</h1>
</header>
<section>
<ul id="edit" contenteditable="true">
<li>
</li>
</ul>
</section>
</body>
</html>
Zwrócić należy tylko uwagę na atrybut “contenteditable”, który umożliwia dynamiczne edytowanie elementów strony przez użytkownika. Do naszego kodu dodałem jQuery aby móc się skupić na przykładzie a nie na obsłudze zdarzeń. Teraz możemy zacząć wykorzystać funkcjonalność localStorage. Według dokumentacji mamy udostępnione następujące metody:
length- które zwraca ilość kluczy
key(n) – które zwraca wartoś klucza na danej pozyzji (n)
setItem(key, value) – które ustawia wartość(value) dla podanego klucza (key)
getItem(key) – zwraca wartość dla podanego klucza (key)
removeItem(key) – usuwa parę klucz/wartość dla podanego klucza (key)
clear() – usuwa całą zawartość
W naszym przykładzie chcemy jedynie dodać kilka pozycji do naszej listy i chcemy aby była dostępna po odświeżeniu lub odpaleniu ponownym strony dlatego element o id równym “edit” i wszytko co się tam znajduje zapisujemy w localStorage za pomocą metody “setItem” :
var edit = document.getElementById('edit');
$(edit).blur(
function(){
localStorage.setItem('todoData', this.innerHTML);
}
);
Następnie dodajemy kod który wypełni nasz element danymi z localStorage (jeżeli wymagany przez nas klucz istnieje) przy pomocy
metody getItem.
if(localStorage.getItem('todoData')){
edit.innerHTML = localStorage.getItem('todoData');
}
Koniec. Wszystko działa pod Chrome 4+, Safari 4, Firefox 3.5, Opera 10.5, Internet Explorer 8. Także Android i Iphone powinny to wspierać, jak również N900 Nokii (choć sam nie testowałem). Dla zainteresowanych DEMO.
Ważne uwagi
LocalStorage jest dostępny tylko dla domen w których dane klucze zostały stworzone. Dodatkowo jeżeli otwieramy naszą stronę z dysku (file: //) Firefox, Opera i IE sobie z tym nie poradzą. Przeglądarki oparte na Webkicie nie mają takiego problemu. Nie wiem czy to jest błąd czy celowe działanie, ale np. dla Firefoxa jest już zgłoszony błąd dla konkretnych domen.
Druga uwaga jeżeli chcemy mieć podobne możliwości na starszych przeglądarkach możemy wykorzystać bibliotekę : jStorage. Osobiście jej nie testowałem , ale jeżeli ktoś to zrobi proszę dać znać.
[...] po stronie użytkownika, może to być szczególnie użyteczne ponieważ w przeciwieństwie do ‘Local Sotrage’ pozwala na zachować pewną strukturę oraz jednolitość danych przy budowie aplikacji. Również [...]
[...] dynamicznych apikacji frontendowych a przecież obok takich technologi jak webowe baz dancyh, local storage czy geolocation taka prosta funkcjonalność bardzo by się [...]
[...] http://frontend.pl/2010/04/w-strone-offline-localstorage/ Ale my zajmiemy się window.openDatabase tworzenie bazy danych przy pomocy SQLite <!–WCS[3]–> [...]