diff options
Diffstat (limited to 'files/pl/web/api/web_storage_api/index.html')
| -rw-r--r-- | files/pl/web/api/web_storage_api/index.html | 155 |
1 files changed, 155 insertions, 0 deletions
diff --git a/files/pl/web/api/web_storage_api/index.html b/files/pl/web/api/web_storage_api/index.html new file mode 100644 index 0000000000..238b10d4d7 --- /dev/null +++ b/files/pl/web/api/web_storage_api/index.html @@ -0,0 +1,155 @@ +--- +title: Storage +slug: Web/API/Storage +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - JavaScript + - Wszystkie_kategorie +translation_of: Web/API/Web_Storage_API +translation_of_original: Web/Guide/API/DOM/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> |