1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
---
title: Storage
slug: Web/API/Web_Storage_API
tags:
- DOM
- Dokumentacja_Gecko_DOM
- Gecko
- JavaScript
- Wszystkie_kategorie
translation_of: Web/API/Web_Storage_API
translation_of_original: Web/Guide/API/DOM/Storage
original_slug: Web/API/Storage
---
<p>{{ ApiRef() }}</p>
<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3>
<p>Magazyn DOM (DOM Storage) jest nazwą określającą zestaw <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">aspektów magazynowania danych</a> wprowadzonych w specyfikacji <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a>. 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 <a href="pl/Firefox_2">Firefoksa 2</a>.</p>
<div class="note"><strong>Uwaga:</strong> Magazyn DOM nie jest tym samym co <a href="pl/Storage">mozStorage</a> (interfejsy XPCOM Mozilli do SQLite) czy <a href="pl/API_przechowywania_sesji">API przechowywania sesji</a> (użyteczność magazynu <a href="pl/XPCOM">XPCOM</a> do użycia przez rozszerzenia).</div>
<h3 id="Opis" name="Opis">Opis</h3>
<p>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).</p>
<p>Obecnie tylko przeglądarki bazujące na Mozilli dostarczają działającą implementację specyfikacji Magazynu DOM. Jednakże, Internet Explorer posiada podobną funkcję nazwaną <a class="external" href="http://msdn.microsoft.com/workshop/author/behaviors/reference/behaviors/userdata.asp">"zachowaniem danych użytkownika"</a> (userData behavior), które pozwala na przechowanie danych pomiędzy wieloma sesjami przeglądarki.</p>
<p>Magazyn DOM jest użyteczny, ponieważ nie istnieje żadna dobra metoda przechowywania przez przeglądarkę sensownej pojemności danych przez dowolny okres czasu. <a class="external" href="http://pl.wikipedia.org/wiki/Ciasteczka_%28internet%29">Ciasteczka HTTP</a> mają ograniczoną pojemność i nie dostarczają żadnego wsparcia dla organizowania przechowywanych danych oraz innych metod (takich jak <a class="external" href="http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html">Lokalny magazyn Flash (Flash Local Storage)</a>), które do działania wymagają dodatkowych wtyczek.</p>
<p>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 <a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a> (aplikacja zarządzająca notatkami) napisana przez <a class="external" href="http://aaronboodman.com/">Aarona Boodmana</a>. 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.</p>
<p>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.</p>
<h3 id="Odno.C5.9Bniki" name="Odno.C5.9Bniki">Odnośniki</h3>
<p>Poniższe elementy są obiektami globalnymi, które istnieją jako własności każdego <a href="pl/DOM/window">okna DOM</a>. Znaczy to, że są one dostępne jako własności <code>sessionStorage</code> lub <code>window.sessionStorage</code> (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).</p>
<h4 id="sessionStorage" name="sessionStorage"><code>sessionStorage</code></h4>
<p>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.</p>
<pre class="brush: js">// Zapisywanie danych do pamięci aktualnej sesji
sessionStorage.username = "John";
// Odtwarzanie wcześniej zapisanych danych
alert( "username = " + sessionStorage.username );
</pre>
<p>Obiekt <code>sessionStorage</code> jest najbardziej pomocny przy przechowywaniu tymczasowych danych, które powinny być zapisane i chronione przez utraceniem w razie przypadkowego przeładowania strony.</p>
<div class="bug"><strong>Uwaga:</strong> Obiekt <code>sessionStorage</code> powinien również być w stanie przechowywać i odtwarzać dane po przypadkowym zawieszeniu się przeglądarki, jednak przez {{ Bug(339445) }} ta funkcjonalność w Firefox jeszcze nie działa.</div>
<p><strong>Przykłady:</strong></p>
<p>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.</p>
<pre class="brush: js"> // 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);
</pre>
<p><strong>Więcej informacji:</strong></p>
<ul>
<li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#sessionstorage">Specyfikacja obiektu sessionStorage</a></li>
</ul>
<h4 id="globalStorage" name="globalStorage"><code>globalStorage</code></h4>
<p>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).</p>
<pre class="brush: js">// 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[<span class="nowiki">''</span>].favBrowser = "Firefox";
</pre>
<p>Dokładniej mówiąc, obiekt <code>globalStorage</code> 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 <code>globalStorage</code> w tej domenie (developer.mozilla.org) mielibyśmy takie obiekty magazynów nam dostępne:</p>
<ul>
<li><code>globalStorage['developer.mozilla.org']</code> - Wszystkie strony wewnątrz subdomeny developer.mozilla.org mogłyby zarówno pobierać i zapisywać dane do tego magazynu.</li>
<li><code>globalStorage['mozilla.org']</code> - Wszystkie strony z domeną mozilla.org mogłyby pobierać i zapisywać dane do tego magazynu.</li>
<li><code>globalStorage['org']</code> - Wszystkie strony z końcówką .org mogą czytać i pobierać dane z tego magazynu.</li>
<li><code>globalStorage['']</code> - Wszystkie strony ze wszystkich domen mają pełen dostęp do tego magazynu.</li>
</ul>
<p><strong>Przykłady:</strong></p>
<p>Wszystkie te przykłady wymagają dołączenia kodu na wszystkich stronach, na których chcemy zaobserwować efekt.</p>
<p>Zapamiętywanie nazwy użytkownika dla konkretnej subdomeny, która została odwiedzona:</p>
<pre class="brush: js"> globalStorage['developer.mozilla.org'].username = "John";
</pre>
<p>Zliczenie każdej wizyty użytkownika na każdej ze stron w danej domenie:</p>
<pre class="brush: js"> // musi zostać użyte <code>parseInt</code>, ponieważ wszystkie przechowywane dane są jako ciągi znakowe
globalStorage['mozilla.org'].visits =
parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1;
</pre>
<p>Zapamiętywanie adresów wszystkich stron, które odwiedzasz:</p>
<pre class="brush: js"> globalStorage[<span class="nowiki">''</span>].sites += "," + location.hostname;
</pre>
<p><strong>Więcej informacji:</strong></p>
<ul>
<li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#globalstorage">Specyfikacja obiektu globalStorage</a></li>
</ul>
<h3 id="Wi.C4.99cej_informacji:" name="Wi.C4.99cej_informacji:">Więcej informacji:</h3>
<ul>
<li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">Specyfikacja Web Applications 1.0</a></li>
<li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">Specyfikacja Web Applications 1.0 Storage</a></li>
<li><a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Włączanie i wyłączanie obsługi Magazynu DOM w Firefox i SeaMonkey</a></li>
</ul>
<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3>
<ul>
<li><a class="external" href="http://channy.creation.net/work/firefox/domstorage/">Proste przykłady obsługi Magazynu DOM</a></li>
<li><a class="external" href="http://aaronboodman.com/halfnote/">Halfnote</a> - aplikacja organizująca notatki używająca Magazynu DOM</li>
</ul>
<h3 id="Tematy_powi.C4.85zane" name="Tematy_powi.C4.85zane">Tematy powiązane</h3>
<ul>
<li><a class="external" href="http://pl.wikipedia.org/wiki/Ciasteczka_%28internet%29">Ciasteczka HTTP</a> (<code><a href="pl/DOM/document.cookie">document.cookie</a></code>)</li>
<li><a class="external" href="http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html">Magazyn lokalny Flash (Flash Local Storage)</a></li>
<li><a class="external" href="http://msdn.microsoft.com/workshop/author/behaviors/reference/behaviors/userdata.asp">Zachowanie danych użytkownika Internet Explorer (userData behavior)</a></li>
</ul>
<p> </p>
<p> </p>
<div class="noinclude"> </div>
<p>{{ languages( { "en": "en/DOM/Storage", "es": "es/DOM/Almacenamiento", "fr": "fr/DOM/Storage", "ja": "ja/DOM/Storage", "zh-cn": "cn/DOM/Storage" } ) }}</p>
|
