Storage

Podsumowanie

Magazyn DOM (DOM Storage) jest nazwą określającą zestaw aspektów magazynowania danych wprowadzonych w specyfikacji Web Applications 1.0. Magazyn DOM jest zaprojektowany, by dostarczyć większą, bezpieczniejszą i prostszą do użycia, alternatywę przechowywania informacji w ciasteczkach. Jest obecnie dostępny tylko w przeglądarkach bazujących na Mozilli, zwłaszcza zaczynając od Firefoksa 2.

Opis

Mechanizm Magazynu DOM w głównej mierze polega na bezpiecznym przechowywaniu par kluczy i wartości możliwych do późniejszego odtworzenia. Celem tego dodatku jest dostarczenie wszechstronnego środka, dzięki któremu mogą być budowane w pełni interaktywne aplikacje (włączając w to zaawansowane cechy, takie jak możliwość pracowania bez dostępu do sieci nawet przez dłuższe okresy czasu).

Obecnie tylko przeglądarki bazujące na Mozilli dostarczają działającą implementację specyfikacji Magazynu DOM. Jednakże, Internet Explorer posiada podobną funkcję nazwaną "zachowaniem danych użytkownika" (userData behavior), które pozwala na przechowanie danych pomiędzy wieloma sesjami przeglądarki.

Magazyn DOM jest użyteczny, ponieważ nie istnieje żadna dobra metoda przechowywania przez przeglądarkę sensownej pojemności danych przez dowolny okres czasu. Ciasteczka HTTP mają ograniczoną pojemność i nie dostarczają żadnego wsparcia dla organizowania przechowywanych danych oraz innych metod (takich jak Lokalny magazyn Flash (Flash Local Storage)), które do działania wymagają dodatkowych wtyczek.

Jedną z pierwszych aplikacji, które zaczęły używać nowej funkcjonalności Magazynu DOM (w dodatku do "zachowania danych użytkownika" Internet Explorer) było halfnote (aplikacja zarządzająca notatkami) napisana przez Aarona Boodmana. W swoim programie, Aaron jednocześnie zapisywał swoje notatki na serwer (kiedy jego połączenie Internetowe było aktywne) i dysk lokalny. To pozwala użytkownikowi na bezpieczne zapisywanie notatek, nawet ze sporadyczną aktywnością połączenia z Internetem.

Pomimo, że koncept oraz implementacja zaprezentowana w programie halfnote była stosunkowo prosta, jego powstanie wskazuje na możliwość tworzenia nowego typu aplikacji internetowych, użytecznych i działających zarówno z aktywnym połączeniem Internetowym, jak i bez niego.

Odnośniki

Poniższe elementy są obiektami globalnymi, które istnieją jako własności każdego okna DOM. Znaczy to, że są one dostępne jako własności sessionStorage lub window.sessionStorage (jest to ważne, ponieważ możliwe dzięki temu jest użycie ramek do przechowania i dostępu do dodatkowych danych, po za tym, co automatycznie jest dostępne na stronie).

sessionStorage

Jest to globalny obiekt, który zajmuje się przechowywaniem danych, które mają być dostępne na czas trwania sesji strony. Trwa ona tak długo, dopóki otwarte jest okno przeglądarki, które można przeładowywać i odświeżać. Otwarcie strony w nowej karcie bądź oknie, powoduje stworzenie nowej sesji.

// Zapisywanie danych do pamięci aktualnej sesji
sessionStorage.username = "John";

// Odtwarzanie wcześniej zapisanych danych
alert( "username = " + sessionStorage.username );

Obiekt sessionStorage jest najbardziej pomocny przy przechowywaniu tymczasowych danych, które powinny być zapisane i chronione przez utraceniem w razie przypadkowego przeładowania strony.

Przykłady:

Automatycznie zapisuje treści pól tekstowych, by w razie przypadkowego odświeżenia strony, odtworzyć treści tych pól, by nie stracić danych już wprowadzonych.

 // Pobranie pola tekstowego, który zamierzamy śledzić.
 var field = document.getElementById("field");
 
 // Sprawdzenie, czy mamy zapisaną już wcześniej wartość
 // (stanie się to tylko wtedy, gdy strona została przeładowana)
 if ( sessionStorage.autosave ) {
     // Odtworzenie wartości pola tekstowego
     field.value = sessionStorage.autosave;
 }
 
 // Sprawdzanie wartości pola tekstowego co 1 sekundę
 setInterval(function(){
     // Oraz zapisanie jej do obiektu sesji
     sessionStorage.autosave = field.value;
 }, 1000);

Więcej informacji:

• Specyfikacja obiektu sessionStorage

globalStorage

Jest to globalny obiekt, który utrzymuje wiele przestrzeni publicznych oraz prywatnych, które mogą być użyte do przechowywania danych przez dłuższy okres czasu (np. przez kilka stron czy sesji przeglądarki).

// Zapisanie danych, które będzie można odtworzyć tylko z domeny mozilla.org
globalStorage['mozilla.org'].snippet = "<b>Cześć</b>, jak się masz?";

// Zapisanie danych, które możliwe będą do otworzenia przez dowolną stronę czy domenę
globalStorage[''].favBrowser = "Firefox";

Dokładniej mówiąc, obiekt globalStorage daje nam dostęp do wielu różnych magazynów obiektów, do których można przypisywać dane. Dla przykładu, jeśli chcielibyśmy stworzyć stronę internetową, która używałaby obiektu globalStorage w tej domenie (developer.mozilla.org) mielibyśmy takie obiekty magazynów nam dostępne:

• globalStorage['developer.mozilla.org'] - Wszystkie strony wewnątrz subdomeny developer.mozilla.org mogłyby zarówno pobierać i zapisywać dane do tego magazynu.
• globalStorage['mozilla.org'] - Wszystkie strony z domeną mozilla.org mogłyby pobierać i zapisywać dane do tego magazynu.
• globalStorage['org'] - Wszystkie strony z końcówką .org mogą czytać i pobierać dane z tego magazynu.
• globalStorage[''] - Wszystkie strony ze wszystkich domen mają pełen dostęp do tego magazynu.

Przykłady:

Wszystkie te przykłady wymagają dołączenia kodu na wszystkich stronach, na których chcemy zaobserwować efekt.

Zapamiętywanie nazwy użytkownika dla konkretnej subdomeny, która została odwiedzona:

 globalStorage['developer.mozilla.org'].username = "John";

Zliczenie każdej wizyty użytkownika na każdej ze stron w danej domenie:

 // musi zostać użyte parseInt, ponieważ wszystkie przechowywane dane są jako ciągi znakowe
 globalStorage['mozilla.org'].visits =
     parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1;

Zapamiętywanie adresów wszystkich stron, które odwiedzasz:

 globalStorage[''].sites += "," + location.hostname;

Więcej informacji:

• Specyfikacja obiektu globalStorage

Więcej informacji:

• Specyfikacja Web Applications 1.0
• Specyfikacja Web Applications 1.0 Storage
• Włączanie i wyłączanie obsługi Magazynu DOM w Firefox i SeaMonkey

Przykłady

• Proste przykłady obsługi Magazynu DOM
• Halfnote - aplikacja organizująca notatki używająca Magazynu DOM

Tematy powiązane

• Ciasteczka HTTP (document.cookie)
• Magazyn lokalny Flash (Flash Local Storage)
• Zachowanie danych użytkownika Internet Explorer (userData behavior)