mozilla

Revision 131621 of DOM Storage

  • Slug da revisão: DOM/Storage
  • Título da revisão: DOM Storage
  • ID da revisão: 131621
  • Criado:
  • Autor: Verruckt
  • É revisão atual? Não
  • Comentário 296 words added, 274 words removed

Conteúdo da revisão

{{ DomRef() }} {{ Fx_minversion_header("2") }}

Resumo

DOM Storage é o nome dado ao conjunto de características de armazenamento relacionadas (storage-related features) inicialmente apresentadas na especificação Web Applications 1.0, e agora dividida em sua própria especificação W3C Web Storage. DOM Storage foi desenhado para proporcionar uma alternativa mais segura e fácil de usar, para o armazenamento de informações em cookies. Atualmente ela está disponível somente nos navegadores baseados no Mozilla e WebKit, começando notavelmente com o Firefox 2 e o Safari 4.

Nota: DOM Storage não é o mesmo que mozStorage (Interface XPCOM da Mozilla para o SQLite) ou Session store API (uma ferramenta de armazenamento XPCOM para uso de extensões).

Descrição

O mecanismo DOM Storage é um meio através do qual pares de strings de chaves/valores podem ser armazenados com segurança e mais tarde recuperados para uso.  A meta desta adição é proporcionar um meio compreensível através do qual aplicações interativas possam ser construídas (incluindo habilidades avançadas, tal como ser capaz de trabalhar "offline" por períodos de tempo maiores).

Atualmente, somente navegadores baseados no Mozilla, Internet Explorer 8 beta 2 e Safari (não outros navegadores baseados em webkit, por exemplo, o Google Chrome) proporcionam um trabalho de implementação da especificação do DOM Storage. O Internet Explorer anterior a versão 8 tem uma característica similar chamada "userData behavior" que permite guardar dados através de múltiplas sessões do navegador.

Dom Storage é útil porque não existem métodos diretamente nos navegadores, bons para guardar quantidades de dados razoáveis por qualquer período de tempo. Os cookies do navegador (Browser cookies) tem uma capacidade limitada e não proporcionam suporte para organizar dados armazenados, e outros métodos (tal como Flash Local Storage) que requerem um plugin externo.

Umas dos primeiros aplicativos públicos a fazer uso da nova funcionalidade DOM Storage (em adição ao userData Behavior do Internet Explorer) foi o halfnote (um aplicativo de tomada de notas) escrito por Aaron Boodman. Em seu aplicativo, Aaron simultaneamente salvava notas no servidor (quando a conexão a internet estava disponível) e em um armazenamento local de dados. Isto permitia ao usuário escrever seguramente, cópias de notas mesmo com uma conexão esporádica à internet.

Embora o conceito e implementação apresentados no halfnote seja comparativamente simples, sua criação mostra a possibilidade para uma nova geração de aplicativos web que sejam utilizáveis tanto online quanto offline.

Referência

A seguir vem objetos globais que existem como propriedades de todos os window object. Isto significa que eles podem ser acessados por sessionStorage ou window.sessionStorage. (Isto é importante porque você pode então usar IFrames para armazenar, ou acessar, dados adicionais, além do que está imediatamente incluído em sua página).

Storage

This is a constructor (Storage) for all Storage instances (sessionStorage and globalStorage[location.host]).  Setting Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) } would be accessed as localStorage.removeKey and sessionStorage.removeKey.

globalStorage items are not an instance of Storage, but instead are an instance of StorageObsolete.

Storage is defined by the WhatWG Storage Interface as this:

interface Storage {
  readonly attribute unsigned long length;
  [IndexGetter] DOMString key(in unsigned long index);
  [NameGetter] DOMString getItem(in DOMString key);
  [NameSetter] void setItem(in DOMString key, in DOMString data);
  [NameDeleter] void removeItem(in DOMString key);
  void clear();
};

 

sessionStorage

This is a global object (sessionStorage) that maintains a storage area that's available for the duration of the page session. A page session lasts for as long as the browser is open and survives over page reloads and restores. Opening a page in a new tab or window will cause a new session to be initiated.

// Save data to a the current session's store
sessionStorage.username = "John";

// Access some stored data
alert( "username = " + sessionStorage.username );

The sessionStorage object is most useful for hanging on to temporary data that should be saved and restored if the browser is accidentally refreshed.

{{ fx_minversion_note("3.5", "Prior to Firefox 3.5, sessionStorage data was not restored automatically after recovering from a browser crash.  Starting in Firefox 3.5, this works as per the specification.") }}

Examples:

Autosave the contents of a text field, and if the browser is accidentally refreshed, restore the text field contents, so that no writing is lost.

 // Get the text field that we're going to track
 var field = document.getElementById("field");
 
 // See if we have an autosave value
 // (this will only happen if the page is accidentally refreshed)
 if ( sessionStorage.autosave ) {
     // Restore the contents of the text field
     field.value = sessionStorage.autosave;
 }
 
 // Check the contents of the text field every second
 setInterval(function(){
     // And save the results into the session storage object
     sessionStorage.autosave = field.value;
 }, 1000);

More information:

globalStorage

{{ Non-standard_header() }} This is a global object (globalStorage) that maintains multiple private storage areas that can be used to hold data over a long period of time (e.g. over multiple pages and browser sessions).

Note: globalStorage is not a Storage instance, but a StorageList instance containing StorageObsolete instances.
// Save data that only scripts on the mozilla.org domain can access
globalStorage['mozilla.org'].snippet = "<b>Hello</b>, how are you?";

Specifically, the globalStorage object provides access to a number of different storage objects into which data can be stored. For example, if we were to build a web page that used globalStorage on this domain (developer.mozilla.org) we'd have the following storage object available to us:

  • globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }} - All web pages within the developer.mozilla.org sub-domain can both read and write data to this storage object.

{{ Fx_minversion_note("3") }}

Examples:

All of these examples require that you have a script inserted (with each of the following code) in every page that you want to see the result on.

Remember a user's username for the particular sub-domain that is being visited:

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

Keep track of the number of times that a user visits all pages of your domain:

 // parseInt must be used since all data is stored as a string
 globalStorage['mozilla.org'].visits =
     parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1;

localStorage

localStorage is the same as globalStorage[location.hostname], with the exception of being scoped to an HTML5 origin (scheme + hostname + non-standard port) and localStorage being an instance of Storage as opposed to globalStorage[location.hostname] being an instance of StorageObsolete. For example, http://example.com is not able to access the same localStorage object as https://example.com but they can access the same globalStorage item. localStorage is a standard interface while globalStorage is non-standard. localStorage was introduced in Firefox 3.5.

Please note that setting a property on globalStorage[location.hostname] does not set it on localStorage and extending Storage.prototype does not affect globalStorage items, only extending StorageObsolete.prototype does.

Note: When the browser goes into private browsing mode, a new, temporary database is created to store local storage data; this database is empty, and is thrown away when private browsing mode is turned off.

Mais informações

Exemplos

  • Basic DOMStorage Examples - Quebrado no Firefox 3 pelo uso de globalStorage em um nível de domínio acima do domínio atual, o que não é permitido no Firefox 3.
  • halfnote - (exibido como quebrado no Firefox 3) Aplicativo de escrita de notas que usa DOM Storage.
  • Noteboard - Aplicativo de escrita de notas que não armazena dados em um servidor. Todos os documentos são armazenados localmente. A tecla tab também trabalha na indentação de texto.
  • jData - Um objeto de interface localStorage compartilhado que pode ser acessado através de qualquer website na internet e trabalha no Firefox 3+, Webkit 3.1.2+ nightlies e IE8. É como uma pseudo-globalStorage[""] em que o acesso a escrita precisa de confirmação do usuário.

Relacionado

{{ languages( { "en": "en/DOM/Storage", "es": "es/DOM/Almacenamiento", "fr": "fr/DOM/Storage", "ja": "ja/DOM/Storage", "pl": "pl/DOM/Storage", "zh-cn": "cn/DOM/Storage" } ) }}

Fonte da revisão

<p>{{ DomRef() }} {{ Fx_minversion_header("2") }}</p>
<h3 name="Summary">Resumo</h3>
<p>DOM Storage é o nome dado ao conjunto de características de armazenamento relacionadas (<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">storage-related features</a>) inicialmente apresentadas na especificação <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a>, e agora dividida em sua própria especificação <a class="external" href="http://dev.w3.org/html5/webstorage/" title="http://dev.w3.org/html5/webstorage/">W3C Web Storage</a>. DOM Storage foi desenhado para proporcionar uma alternativa mais segura e fácil de usar, para o armazenamento de informações em cookies. Atualmente ela está disponível somente nos navegadores baseados no Mozilla e WebKit, começando notavelmente com o <a class="internal" href="/pt/Firefox_2_para_desenvolvedores" title="pt/Firefox 2 para desenvolvedores">Firefox 2</a> e o <a class="external" href="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html" title="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html">Safari 4</a>.</p>
<div class="note"><strong>Nota:</strong> DOM Storage não é o mesmo que <a href="/en/Storage" title="en/Storage">mozStorage</a> (Interface XPCOM da Mozilla para o SQLite) ou <a href="/en/Session_store_API" title="en/Session_store_API">Session store API</a> (uma ferramenta de armazenamento <a href="/en/XPCOM" title="en/XPCOM">XPCOM</a> para uso de extensões).</div>
<h3 name="Description">Descrição</h3>
<p>O mecanismo DOM Storage é um meio através do qual pares de strings de chaves/valores podem ser armazenados com segurança e mais tarde recuperados para uso.  A meta desta adição é proporcionar um meio compreensível através do qual aplicações interativas possam ser construídas (incluindo habilidades avançadas, tal como ser capaz de trabalhar "offline" por períodos de tempo maiores).</p>
<p>Atualmente, somente navegadores baseados no Mozilla, Internet Explorer 8 beta 2 e Safari (não outros navegadores baseados em webkit, por exemplo, o Google Chrome) proporcionam um trabalho de implementação da especificação do DOM Storage. O Internet Explorer anterior a versão 8 tem uma característica similar chamada "<a class="external" href="http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx">userData behavior</a>" que permite guardar dados através de múltiplas sessões do navegador.</p>
<p>Dom Storage é útil porque não existem métodos diretamente nos navegadores, bons para guardar quantidades de dados razoáveis por qualquer período de tempo. Os cookies do navegador (<a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">Browser cookies</a>) tem uma capacidade limitada e não proporcionam suporte para organizar dados armazenados, e outros métodos (tal como <a class="external" href="http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html">Flash Local Storage</a>) que requerem um plugin externo.</p>
<p>Umas dos primeiros aplicativos públicos a fazer uso da nova funcionalidade DOM Storage (em adição ao userData Behavior do Internet Explorer) foi o <a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a> (um aplicativo de tomada de notas) escrito por <a class="external" href="http://aaronboodman.com/">Aaron Boodman</a>. Em seu aplicativo, Aaron simultaneamente salvava notas no servidor (quando a conexão a internet estava disponível) e em um armazenamento local de dados. Isto permitia ao usuário escrever seguramente, cópias de notas mesmo com uma conexão esporádica à internet.</p>
<p>Embora o conceito e implementação apresentados no halfnote seja comparativamente simples, sua criação mostra a possibilidade para uma nova geração de aplicativos web que sejam utilizáveis tanto online quanto offline.</p>
<h3 name="Reference">Referência</h3>
<p>A seguir vem objetos globais que existem como propriedades de todos os <a href="/en/DOM/window" title="en/DOM/window"><code>window</code> object</a>. Isto significa que eles podem ser acessados por <code>sessionStorage</code> ou <code>window.sessionStorage</code>. (Isto é importante porque você pode então usar IFrames para armazenar, ou acessar, dados adicionais, além do que está imediatamente incluído em sua página).</p>
<h4 name="sessionStorage"><code>Storage</code></h4>
<p>This is a constructor (<code>Storage</code>) for all Storage instances (<code>sessionStorage</code> and <code>globalStorage[location.host]).</code>  Setting <code>Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) }</code> would be accessed as <code>localStorage.removeKey and sessionStorage.removeKey</code>.</p>
<p><code>globalStorage</code> items are not an instance of <code>Storage</code>, but instead are an instance of <code>StorageObsolete</code>.</p>
<p><code>Storage</code> is defined by the WhatWG <a class="external" href="http://dev.w3.org/html5/webstorage/#storage-0" title="http://dev.w3.org/html5/webstorage/#storage-0">Storage Interface</a> as this:</p>
<pre class="eval">interface <dfn id="storage-0">Storage</dfn> {
  readonly attribute unsigned long <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-length" title="dom-Storage-length">length</a>;
  [IndexGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-key" title="dom-Storage-key">key</a>(in unsigned long index);
  [NameGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-getitem" title="dom-Storage-getItem">getItem</a>(in DOMString key);
  [NameSetter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-setitem" title="dom-Storage-setItem">setItem</a>(in DOMString key, in DOMString data);
  [NameDeleter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-removeitem" title="dom-Storage-removeItem">removeItem</a>(in DOMString key);
  void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-clear" title="dom-Storage-clear">clear</a>();
};</pre>
<p> </p>
<h4 name="sessionStorage"><code>sessionStorage</code></h4>
<p>This is a global object (<code>sessionStorage</code>) that maintains a storage area that's available for the duration of the page session. A page session lasts for as long as the browser is open and survives over page reloads and restores. Opening a page in a new tab or window will cause a new session to be initiated.</p>
<pre class="eval">// Save data to a the current session's store
sessionStorage.username = "John";

// Access some stored data
alert( "username = " + sessionStorage.username );
</pre>
<p>The <code>sessionStorage</code> object is most useful for hanging on to temporary data that should be saved and restored if the browser is accidentally refreshed.</p>
<p>{{ fx_minversion_note("3.5", "Prior to Firefox 3.5, sessionStorage data was not restored automatically after recovering from a browser crash.  Starting in Firefox 3.5, this works as per the specification.") }}</p>
<p><strong>Examples:</strong></p>
<p>Autosave the contents of a text field, and if the browser is accidentally refreshed, restore the text field contents, so that no writing is lost.</p>
<pre class="eval"> // Get the text field that we're going to track
 var field = document.getElementById("field");
 
 // See if we have an autosave value
 // (this will only happen if the page is accidentally refreshed)
 if ( sessionStorage.autosave ) {
     // Restore the contents of the text field
     field.value = sessionStorage.autosave;
 }
 
 // Check the contents of the text field every second
 setInterval(function(){
     // And save the results into the session storage object
     sessionStorage.autosave = field.value;
 }, 1000);
</pre>
<p><strong>More information:</strong></p>
<ul> <li><a class="external" href="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute" title="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute">sessionStorage specification</a> </li>
</ul>
<h4 name="globalStorage"><code>globalStorage</code></h4>
<p>{{ Non-standard_header() }} This is a global object (<code>globalStorage</code>) that maintains multiple private storage areas that can be used to hold data over a long period of time (e.g. over multiple pages and browser sessions).</p>
<div class="warning">Note: <code>globalStorage</code> is not a <code>Storage</code> instance, but a <code>StorageList</code> instance containing <code>StorageObsolete</code> instances.</div>
<pre class="eval">// Save data that only scripts on the mozilla.org domain can access
globalStorage['mozilla.org'].snippet = "&lt;b&gt;Hello&lt;/b&gt;, how are you?";
</pre>
<p>Specifically, the <code>globalStorage</code> object provides access to a number of different storage objects into which data can be stored. For example, if we were to build a web page that used <code>globalStorage</code> on this domain (developer.mozilla.org) we'd have the following storage object available to us:</p>
<ul> <li><code>globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }}</code> - All web pages within the developer.mozilla.org sub-domain can both read and write data to this storage object.</li>
</ul>
<p>{{ Fx_minversion_note("3") }}</p>
<p><strong>Examples:</strong></p>
<p>All of these examples require that you have a script inserted (with each of the following code) in every page that you want to see the result on.</p>
<p>Remember a user's username for the particular sub-domain that is being visited:</p>
<pre class="eval"> globalStorage['developer.mozilla.org'].username = "John";
</pre>
<p>Keep track of the number of times that a user visits all pages of your domain:</p>
<pre class="eval"> // parseInt must be used since all data is stored as a string
 globalStorage['mozilla.org'].visits =
     parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1;
</pre>
<h4 name="globalStorage"><code>localStorage</code></h4>
<p><code>localStorage</code> is the same as <code>globalStorage[location.hostname]</code>, with the exception of being scoped to an HTML5 origin (scheme + hostname + non-standard port) and <code>localStorage</code> being an instance of <code>Storage</code> as opposed to <code>globalStorage[location.hostname]</code> being an instance of <code>StorageObsolete</code>. For example, <a class=" external" href="http://example.com" rel="freelink">http://example.com</a> is not able to access the same <code>localStorage</code> object as <a class=" link-https" href="https://example.com" rel="freelink">https://example.com</a> but they can access the same <code>globalStorage</code> item. <code>localStorage</code> is a standard interface while <code>globalStorage</code> is non-standard. <code>localStorage</code> was introduced in Firefox 3.5.</p>
<p>Please note that setting a property on <code>globalStorage[location.hostname]</code> does <strong>not</strong> set it on <code>localStorage</code> and extending <code>Storage.prototype</code> does not affect <code>globalStorage</code> items, only extending <code>StorageObsolete.prototype</code> does.</p>
<div class="note"><strong>Note:</strong> When the browser goes into private browsing mode, a new, temporary database is created to store local storage data; this database is empty, and is thrown away when private browsing mode is turned off.</div>
<h3 name="More_information">Mais informações</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/webstorage/" title="http://www.w3.org/TR/webstorage/">Web Storage</a> (W3C Web Apps Working Group)</li> <li><a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Enable/Disable DOM Storage in Firefox or SeaMonkey</a></li>
</ul>
<h3 name="Examples">Exemplos</h3>
<ul> <li><a class="external" href="http://channy.creation.net/work/firefox/domstorage/">Basic DOMStorage Examples</a> - Quebrado no Firefox 3 pelo uso de globalStorage em um nível de domínio acima do domínio atual, o que não é permitido no Firefox 3.</li> <li><a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a> - (exibido como quebrado no Firefox 3) Aplicativo de escrita de notas que usa DOM Storage.</li> <li><a class="external" href="http://noteboard.eligrey.com/" title="http://noteboard.eligrey.com/">Noteboard</a> - Aplicativo de escrita de notas que não armazena dados em um servidor. Todos os documentos são armazenados localmente. A tecla tab também trabalha na indentação de texto.</li> <li><a class="external" href="http://www.eligrey.com/projects/jdata/" title="http://www.eligrey.com/projects/jdata/">jData</a> - Um objeto de interface localStorage compartilhado que pode ser acessado através de qualquer website na internet e trabalha no Firefox 3+, Webkit 3.1.2+ nightlies e IE8. É como uma pseudo-globalStorage[""] em que o acesso a escrita precisa de confirmação do usuário.</li>
</ul>
<h3 name="Related">Relacionado</h3>
<ul> <li><a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookies</a> (<code><a href="/en/DOM/document.cookie" title="en/DOM/document.cookie">document.cookie</a></code>)</li> <li><a class="external" href="http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html">Flash Local Storage</a></li> <li><a class="external" href="http://msdn2.microsoft.com/en-us/library/ms531424.aspx">Internet Explorer userData behavior</a></li>
</ul>
<p>{{ languages( { "en": "en/DOM/Storage", "es": "es/DOM/Almacenamiento", "fr": "fr/DOM/Storage", "ja": "ja/DOM/Storage", "pl": "pl/DOM/Storage", "zh-cn": "cn/DOM/Storage" } ) }}</p>
Reverter para esta revisão