Artykuł

wrz 28 2011
0

Personalizacja strony przy użyciu mechanizmu localStorage

Od dawien dawna, webmasterzy mogą korzystać z mechanizmu ciasteczek (Cookies) do składowania danych w przeglądarce użytkownika. Mechanizm ciasteczek jest na tyle powszechny, że można go spotkać praktycznie na każdej stronie. Dla poprawnego działania wielu witryn i skryptów jest on praktycznie niezbędny.

W ten sposób, działa np. popularny system do obsługi statystyk, czyli Google Analytics. Kiedy użytkownik wejdzie na jedną z podstron serwisu monitorowanego przez GA, to do jego przeglądarki zostanie zapisane ciasteczko. W momencie kiedy trafi na inną podstronę serwisu, ciasteczko zostanie odczytane, a skrypt będzie wiedział, czy jest to aktualna sesja danego użytkownika, czy też powraca on po dłuższym czasie nieobecności, czy też jest to może zupełnie nowy, nieznany użytkownik.

Z tego m.in. powodu, ciasteczka często posądzane są o ograniczanie naszej prywatności i szpiegostwo. Dlatego też niektórzy z użytkowników po prostu je wyłączają, co może być jednak zgubne, dla webmasterów którzy nie zawsze mają złe intencje, a ciasteczka wykorzystują do lepszej personalizacji.

Na szczęście istnieje mechanizm localStorage, o którym powiemy sobie więcej właśnie dziś.

Wprowadzenie

Po wstępie, w którym w głównej mierze skupiłem się na ciasteczkach, myślę że powinniście się domyślać do czego można zastosować mechanizm localStorage (sama nazwa powinna być już dużą wskazówką).

Nie mylił się ten, kto odgadł że tytułowa technologia pozwala na składowanie danych po stronie użytkownika, a dokładniej mówiąc w pamięci przeglądarki. localStorage pozwala na przechowywanie par klucz-wartość w przeglądarce użytkownika. Dane te, zapisywane są dla domeny w której znajduje się aktualnie przeglądana strona, czyli tutaj działa to podobnie jak ciasteczka.

Istnieje jednak bardzo poważna różnica w stosunku do ciasteczek. Elementy zapisane przy użyciu localStorage nie mają ograniczenia czasowego, czyli niejako funkcjonują wiecznie.

Sam mechanizm localStorage (istnieje również towarzyszący mu mechanizm sessionStorage - wykorzystywany na czas trwania sesji) był pierwotnie elementem specyfikacji HTML5. Z czasem został on wydzielony jednak do osobnego projektu.

Praca z localStorage

Dostęp do localStorage, uzyskujemy za pomocą JavaScriptu - tak więc warunkiem koniecznym jest jego włączona obsługa przez przeglądarki naszych użytkowników (dodajmy do tego w miarę nowe przeglądarki).

Przed rozpoczęciem zabawy z zapisywaniem/odczytywaniem właściwości, powinniśmy sprawdzić czy przeglądarka wspiera tą technologię. A robimy to za pomocą następującej konstrukcji:

if(window.localStorage){
	alert("Hurra!");
} else {
	alert("Figa z makiem!");
}

Jeśli przeglądarka nie obsługuje tej technologii, to możemy alternatywnie skorzystać z ciasteczek - chyba, że chcecie by Wasi użytkownicy byli na czasie tak samo jak Wy i po prostu dla użytkowników ze starymi przeglądarkami, dostarczycie mniej funkcjonalności, wymuszając tym niejako konieczność aktualizacji, aby móc cieszyć się z wszystkich atrakcji przygotowanych przez Was na Waszej witrynie.

Odczyt i zapis danych

Odczytywać i zapisywać dane,możemy zasadniczo na dwa sposoby. Zaczniemy oczywiście od zapisu.

Zapis do localStorage

Aby zapisywać (jak i odczytywać) musimy operować na obiekcie localStorage. Zasadniczo zapis możemy realizować na dwa sposoby:

if(window.localStorage){
	localStorage.setItem("name", "Jurek");
	localStorage.surname = "Piechowiak";
} else {
	alert("Figa z makiem!");
}

W tym przypadku, zapisaliśmy do pamięci przeglądarki imię oraz nazwisko. Aby się upewnić, że dane w obu przypadkach zostały zapisane poprawne, wystarczy np. uruchomić przeglądarkę Chrome i jej narzędzia dla programistów. Jak widać na załączonym obrazku, mechanizm działa:)

Tutaj mała dygresja na temat kluczy. Zasadniczo przyjęło się, że klucz nie zawiera spacji, znaków specjalnych i polskich liter. Jednak jeśli skorzystamy z pierwszej metody, to możemy w teorii skorzystać z niezalecanych praktyk (czyli np. spacji w nazwie klucza), aczkolwiek może to przynieść różne, zgubne skutki.

Odczyt danych

Odczyt danych, możemy również przeprowadzić na dwa sposoby:

if(window.localStorage){
	alert(localStorage.getItem("name"));
	alert(localStorage.surname);
} else {
	alert("Figa z makiem!");
}

Odpowiednikiem funkcji setItem, jest w tym przypadku getItem, a jako argument podajemy nazwę wcześniej utworzonego klucza.

Jeśli właściwość o wybranym kluczu, nie będzie istnieć w pamięci, to w wyniku wywołania funkcji alert, możemy otrzymać komunikat undefined.

Zastosowanie

Zastosowanie mechanizmu localStorage może być bardzo podobne do ciasteczek. Jak na mój gust, ten mechanizm świetnie sprawdzi się w personalizacji strony. W chwili obecnej, niestety również w tym przypadku ze względu na świeżość mechanizmu, możemy liczyć tylko na wsparcie w najnowszych przeglądarkach. Jeśli liczyliście na wsparcie w IE6, to nie ma na to żadnych szans;-)

Literatura

Wpis powstał w oparciu o książkę HTML5 i CSS3 - Standardy przyszłości autorstwa Briana P. Hogana. Książka dostępna jest w księgarni internetowej Helion.

Data ostatniej modyfikacji: 28.11.2011, 18:35.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus