Revision 287108 of DOM Storage

  • Slug da revisão: DOM/Storage
  • Título da revisão: DOM Storage
  • ID da revisão: 287108
  • Criado:
  • Autor: Verruckt
  • É revisão atual? Não
  • Comentário 126 words added, 116 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

Este é um construtor (Storage) para todas as instâncias Storage (sessionStorage e globalStorage[location.host]). Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) } assim configuradao, pode ser acessado como localStorage.removeKey e sessionStorage.removeKey.

Itens globalStorage não são instâncias de Storage, e sim uma instância de StorageObsolete.

Storage é definido pelo WhatWG Storage Interface como:

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

Este é um objeto global (sessionStorage) que mantém uma área de armazenamento disponível enquanto durar a sessão da página. Uma sessão de página dura enquanto o navegador estiver aberto e continua mesmo sobre recarregamentos e restaurações. Abrindo uma página em uma nova aba ou janela causará o início de uma nova sessão.

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

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

O objeto sessionStorage é útil para guardar dados temporários que devem ser salvos e restaurados se o navegador for atualizado acidentalmente.

{{ fx_minversion_note("3.5", "Nas versões anteriores ao Firefox 3.5, os dados em sessionStorage não eram restaurados automaticamente depois de recuperar-se de uma quebra no navegador. A partir do Firefox 3.5, isto funciona como na especificação.") }}

Exemplos:

Autosalvar o conteúdo de uma campo de texto, e se o navegador for atualizado acidentalmente , restaurar o conteúdo do campo de texto, não tendo perdas na escrita.

 // 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);

Mais informações:

globalStorage

{{ Non-standard_header() }} Este é um objeto global (globalStorage) que mantém múltiplas áreas de armazenamento privadas que podem ser usadas para guardar dados por um longo período de tempo (por exemplo, sobre múltiplas láginas e sessões do navegador).

Nota: globalStorage não é uma instância de Storage, mas uma instância StorageList contendo instâncias StorageObsolete.
// Save data that only scripts on the mozilla.org domain can access
globalStorage['mozilla.org'].snippet = "<b>Hello</b>, how are you?";

Especificamente, o objeto globalStorage fornece acesso a um número de diferentes objetos de armazenamento em que os dados sejam armazenados. Por exemplo, se construirmos uma página web que use globalStorage em seu domínio (developer.mozilla.org) é necessário termos o objeto de armazenamento a seguir disponível para nós:

  • globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }} - Todas as páginas web com o subdomínio developer.mozilla.org podem tanto ler quanto escrever dados neste objeto de armazenamento.

{{ Fx_minversion_note(3, "O Firefox 2 passou a permitir acesso aos objetos de armazenamento superiores ao documento corrente na hierarquia do domínio. Por razões de segurança isto não é mais permitido no Firefox 3. Além disso, a proposta de adição ao HTML 5 foi removida da especificação do HTML 5 em favor de localStorage, que foi implementado no Firefox 3.5.") }}

Exemplos:

Todos estes exemplos requerem que você tenha uns script inserido (com o código seguinte) em todas as páginas que você quiser ver o resultado.

Lembrar o nome de usuário para o subdomínio particular que está sendo visitado:

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

Manter o número de vezes que um usuário visitou todas as páginas do seu domínio:

 // 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 é o mesmo que globalStorage[location.hostname], com a exceção de ser projetado para a origem do HTML 5 (esquema + nome do host + porta não padrão) e localStorage é uma instância de Storage diferente de globalStorage[location.hostname] que é uma instância de StorageObsolete. Por exemplo, http://example.com não está disponível para acessar o mesmo objeto localStorage que https://example.com mas eles podem acessar o mesmo item globalStorage. localStorage é uma interface padrão enquanto globalStorage não é padrão. localStorage foi adicionada ao Firefox 3.5.

Por favor, note que configurar a propriedade globalStorage[location.hostname] não a configura em localStorage e por extensão Storage.prototype não afeta itens globalStorage, somente extendendo o que StorageObsolete.prototype faz.

Nota: Quando o navegador entra em modo de navegação privada, um novo banco de dados temporário é criado para guardar dados de armazenamento local; este banco de dados é vazio, e é jogado fora qunado o modo de navegação privado é desativado.

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.

{{ 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 id="Summary" 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 id="Description" 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 id="Reference" 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 id="sessionStorage" name="sessionStorage"><code>Storage</code></h4>
<p>Este é um construtor (<code>Storage</code>) para todas as instâncias Storage (<code>sessionStorage</code> e <code>globalStorage[location.host]).</code> <code>Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) }</code> assim configuradao, pode ser acessado como <code>localStorage.removeKey e sessionStorage.removeKey</code>.</p>
<p><code>Itens globalStorage</code> não são instâncias de <code>Storage</code>, e sim uma instância de <code>StorageObsolete</code>.</p>
<p><code>Storage</code> é definido pelo 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> como:</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 id="sessionStorage" name="sessionStorage"><code>sessionStorage</code></h4>
<p>Este é um objeto global (<code>sessionStorage</code>) que mantém uma área de armazenamento disponível enquanto durar a sessão da página. Uma sessão de página dura enquanto o navegador estiver aberto e continua mesmo sobre recarregamentos e restaurações. Abrindo uma página em uma nova aba ou janela causará o início de uma nova sessão.</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>O objeto <code>sessionStorage</code> é útil para guardar dados temporários que devem ser salvos e restaurados se o navegador for atualizado acidentalmente.</p>
<p>{{ fx_minversion_note("3.5", "Nas versões anteriores ao Firefox 3.5, os dados em sessionStorage não eram restaurados automaticamente depois de recuperar-se de uma quebra no navegador. A partir do Firefox 3.5, isto funciona como na especificação.") }}</p>
<p><strong>Exemplos:</strong></p>
<p>Autosalvar o conteúdo de uma campo de texto, e se o navegador for atualizado acidentalmente , restaurar o conteúdo do campo de texto, não tendo perdas na escrita.</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>Mais informações:</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 id="globalStorage" name="globalStorage"><code>globalStorage</code></h4>
<p>{{ Non-standard_header() }} Este é um objeto global (<code>globalStorage</code>) que mantém múltiplas áreas de armazenamento privadas que podem ser usadas para guardar dados por um longo período de tempo (por exemplo, sobre múltiplas láginas e sessões do navegador).</p>
<div class="warning">Nota: <code>globalStorage</code> não é uma instância de <code>Storage</code>, mas uma instância <code>StorageList</code> contendo instâncias <code>StorageObsolete</code>.</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>Especificamente, o objeto <code>globalStorage</code> fornece acesso a um número de diferentes objetos de armazenamento em que os dados sejam armazenados. Por exemplo, se construirmos uma página web que use <code>globalStorage</code> em seu domínio (developer.mozilla.org) é necessário termos o objeto de armazenamento a seguir disponível para nós:</p>
<ul> <li><code>globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }}</code> - Todas as páginas web com o subdomínio developer.mozilla.org podem tanto ler quanto escrever dados neste objeto de armazenamento.</li>
</ul>
<p>{{ Fx_minversion_note(3, "O Firefox 2 passou a permitir acesso aos objetos de armazenamento superiores ao documento corrente na hierarquia do domínio. Por razões de segurança isto não é mais permitido no Firefox 3. Além disso, a proposta de adição ao HTML 5 foi removida da especificação do HTML 5 em favor de <code>localStorage</code>, que foi implementado no Firefox 3.5.") }}</p>
<p><strong>Exemplos:</strong></p>
<p>Todos estes exemplos requerem que você tenha uns script inserido (com o código seguinte) em todas as páginas que você quiser ver o resultado.</p>
<p>Lembrar o nome de usuário para o subdomínio particular que está sendo visitado:</p>
<pre class="eval"> globalStorage['developer.mozilla.org'].username = "John";
</pre>
<p>Manter o número de vezes que um usuário visitou todas as páginas do seu domínio:</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 id="globalStorage" name="globalStorage"><code>localStorage</code></h4>
<p><code>localStorage</code> é o mesmo que <code>globalStorage[location.hostname]</code>, com a exceção de ser projetado para a origem do HTML 5 (esquema + nome do host + porta não padrão) e <code>localStorage</code> é uma instância de <code>Storage</code> diferente de <code>globalStorage[location.hostname]</code> que é uma instância de <code>StorageObsolete</code>. Por exemplo, <a class=" external" href="http://example.com" rel="freelink">http://example.com</a> não está disponível para acessar o mesmo objeto <code>localStorage</code> que <a class=" link-https" href="https://example.com" rel="freelink">https://example.com</a> mas eles podem acessar o mesmo item <code>globalStorage</code>. <code>localStorage</code> é uma interface padrão enquanto <code>globalStorage</code> não é padrão. <code>localStorage</code> foi adicionada ao Firefox 3.5.</p>
<p>Por favor, note que configurar a propriedade <code>globalStorage[location.hostname]</code> <strong>não</strong> a configura em <code>localStorage</code> e por extensão <code>Storage.prototype</code> não afeta itens <code>globalStorage</code>, somente extendendo o que <code>StorageObsolete.prototype</code> faz.</p>
<div class="note"><strong>Nota:</strong> Quando o navegador entra em modo de navegação privada, um novo banco de dados temporário é criado para guardar dados de armazenamento local; este banco de dados é vazio, e é jogado fora qunado o modo de navegação privado é desativado.</div><h3 id="More_information" 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 id="Examples" 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 id="Related" 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