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
|
---
title: DOM Storage
slug: DOM/Storage
---
<p>{{ ApiRef() }} {{ 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>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 = "<b>Hello</b>, 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>
|
