Introdução ao Armazenamento DOM
.gif "Novidade no Windows Internet Explorer 8")
A API de Armazenamento DOM inclui dois mecanismos relacionados para manter dados do lado do cliente de uma maneira segura usando o DOM (Document Object Model), sessionStorage e localStorage. Esses objetos foram introduzidos no Internet Explorer 8.
Observação Nas versões anteriores do Internet Explorer, o armazenamento de dados persistente era implementado pelo comportamento userData.
Este tópico contém as seções a seguir.
- O que é o Armazenamento DOM?
- Objetos de script do Armazenamento DOM
- window.sessionStorage
- window.localStorage
- O objeto Storage
- Eventos de Armazenamento DOM
- onstorage
- onstoragecommit
- Segurança e privacidade
- Contexto e origem de navegação de nível superior
- A origem determina limites de armazenamento
- Limpando as áreas de armazenamento
- Tópicos relacionados
O que é o Armazenamento DOM?
Geralmente, o Armazenamento DOM é comparado a cookies HTTP. Assim como nos cookies, os desenvolvedores da Web podem armazenar dados por sessão ou específicos do domínio como pares de nome/valor no cliente que usa Armazenamento DOM. Entretanto, ao contrário dos cookies, o Armazenamento DOM facilita o controle de como as informações armazenadas por uma janela ficam visíveis para outra.
Por exemplo, um usuário poderia abrir duas janelas do navegador para comprar passagens aéreas para dois voos diferentes. No entanto, se o aplicativo Web da companhia aérea usar cookies para armazenar seu estado de sessão, as informações poderiam ¨vazar¨ de uma transação para outra, potencialmente fazendo com que o usuário comprasse duas passagens para o mesmo voo sem perceber. Como os aplicativos estão cada vez mais capazes de demonstrar comportamentos offline, como o armazenamento de valores localmente para retorno posterior ao servidor, o potencial ¨vazamento¨ desse tipo de informação se torna ainda mais predominante.
O Armazenamento DOM também oferece significativamente mais espaço em disco do que cookies. No Internet Explorer, os cookies só podem armazenar 4 quilobytes (KB) de dados. Esse total de bytes pode ser um par de nome/valor de 4 KB ou pode ser até 20 pares de nome/valor com um tamanho total de 4 KB. Por comparação, o Armazenamento DOM oferece cerca de 10 megabytes (MB) para cada área de armazenamento.
Funcionalmente, as áreas de armazenamento de cliente são bastante diferentes de cookies. Diferente dos cookies, o Armazenamento DOM não transmite valores ao servidor com cada solicitação e nem faz com que os dados de uma área de armazenamento local expirem. E, ao contrário de cookies, é fácil acessar dados individuais usando uma interface padrão que tem suporte crescente entre fornecedores de navegadores.
Objetos de script do Armazenamento DOM
- window.sessionStorage
- window.localStorage
- O objeto Storage
window.sessionStorage
O armazenamento de sessão foi criado para cenários onde o usuário esteja executando uma única transação. O atributo sessionStorage do objeto window mantém pares de chave/valor para todas as páginas carregadas durante o tempo de vida de uma única guia (para a duração do contexto de navegação de nível superior). Por exemplo, uma página poderia ter uma caixa de seleção que seria marcada pelo usuário para indicar que ele deseja fazer um seguro.
<label>
<input type="checkbox" onchange="sessionStorage.insurance = checked">
I want insurance on this trip.
</label>
Uma página posterior poderia verificar então, a partir de script, se o usuário havia marcado a caixa de seleção.
if (sessionStorage.insurance) { ... }
O objeto Storage dá suporte a propriedades expando ('seguro' no exemplo anterior). Se o nome de propriedade não existir, um par de chave/valor será automaticamente criado para armazená-lo. Observe que pares de chave/valor sempre são armazenados como cadeias de caracteres. Tipos de dados diferentes, como números, valores booleanos e dados estruturados devem ser convertidos em cadeias de caracteres antes de serem mantidos em uma área de armazenamento.
Depois de um valor ter sido salvo em um sessionStorage, poderá ser recuperado por script executado em outra página no mesmo contexto. Quando outro documento for carregado, sessionStorage será inicializado na memória para URLs de mesma origem. (consulte a seção Segurança e privacidade para obter mais informações).
Observação Embora seja permitido pelo HTML 5 (rascunho) .gif "Link da World Wide Web")
, o Internet Explorer 8 não reinicia sessionStorage depois da recuperação de falha do navegador.
window.localStorage
O mecanismo de armazenamento local se estende por várias janelas e persiste além da sessão atual. O atributo localStorage fornece áreas de armazenamento persistente para domínios. Por questões de desempenho, permite que aplicativos Web armazenem no cliente quase 10 MB de dados de usuário, como documentos inteiros ou a caixa postal de um usuário.
Por exemplo, um site pode exibir uma contagem de quantas vezes o usuário visitou uma página com o script a seguir.
<p>
You have viewed this page
<span id="count">an untold number of</span>
time(s).
</p>
<script>
var storage = window.localStorage;
if (!storage.pageLoadCount) storage.pageLoadCount = 0;
storage.pageLoadCount = parseInt(storage.pageLoadCount, 10) + 1;
document.getElementById('count').innerHTML = storage.pageLoadCount;
</script>
Observação Antes de incrementar pageLoadCount, primeiro ele precisa ser convertido em um número usando o Método parseInt (JScript 5.6).
Cada domínio e subdomínio tem sua própria área de armazenamento local separada. Os domínios podem acessar as áreas de armazenamento de subdomínios, e os subdomínios podem acessar as áreas de armazenamento de domínios pai. Por exemplo, localStorage['example.com'] pode ser acessado por example.com e qualquer um de seus subdomínios. O subdomínio localStorage['www.example.com'] pode ser acessado por example.com, mas não por outros subdomínios, como mail.example.com.
O objeto Storage
As propriedades e os métodos a seguir têm suporte por objetos de armazenamento local e sessões.
Remove todos os pares de chave/valor da área de Armazenamento DOM.
Retorna referências ao construtor de um objeto.
Recupera o valor atual associado à chave de Armazenamento DOM.
Recupera a chave no índice especificado na coleção.
Recupera o comprimento da lista chave/valor.
Recupera o espaço de memória restante, em bytes, para o objeto de armazenamento.
Exclui um par de chave/valor da coleção de Armazenamento DOM.
Define um par de chave/valor.
Eventos de Armazenamento DOM
O Internet Explorer aciona eventos quando dados de uma área de armazenamento são atualizados, para que as informações possam ser sincronizadas entre várias instâncias do navegador ou entre guias.
Os eventos a seguir têm suporte.
- onstorage
- onstoragecommit
onstorage
O evento onstorage é acionado em um documento quando uma área de armazenamento é alterada. Todos os documentos que compartilham o mesmo contexto de sessão e os que estão exibindo uma página do mesmo domínio ou subdomínio onde o armazenamento local está sendo confirmado receberão o evento.
Se o objeto do documento de destino não estiver ativo no momento, o Internet Explorer não acionará qualquer evento.
onstoragecommit
O Internet Explorer usa arquivos XML para armazenamento local. O evento onstoragecommit é acionado quando um armazenamento local é gravado em disco.
Segurança e privacidade
Os dados contidos em armazenamento local são muito mais públicos do que os armazenados em cookies, que podem ser limitados a um determinado caminho em um domínio. Mesmo a escolha de uma chave difícil de adivinhar não oferecerá qualquer privacidade, uma vez que o objeto Storage oferece uma forma de enumerá-las.
Algumas considerações a serem feitas:
- Contexto e origem de navegação de nível superior
- A origem determina limites de armazenamento
- Limpando as áreas de armazenamento
Contexto e origem de navegação de nível superior
O acesso à área de armazenamento de sessão é restrito pelo contexto de navegação de nível superior. No Internet Explorer, um novo contexto de navegação é criado para cada guia. Um script executado em um contexto de navegação de nível superior não tem nenhum acesso ao armazenamento criado em outro. Os sites podem adicionar dados ao armazenamento de sessão, e ele poderá ser acessado de qualquer página dessa origem aberta na mesma janela.
A origem é determinada pelo protocolo, pelo nome do host (ou endereço IP) e pelo número de porta da URL do documento. O acesso de script aos dados de armazenamento só será permitido se a origem de script corresponder à área de armazenamento.
A origem determina limites de armazenamento
Os limites de cota de disco são impostos ao domínio da página que define o valor, em vez de ao domínio onde o valor está sendo definido. Isso impede que scripts mal-intencionados usem toda a cota de armazenamento de um domínio relacionado. Também impede que tais scripts usem subdomínios aleatórios para armazenar quantidades irrestritas de dados.
O tamanho de armazenamento é calculado como o comprimento total de todos os valores e nomes de chave, e uma única área de armazenamento pode conter até 10 milhões de bytes. A propriedade remainingSpace é usada para determinar o espaço de armazenamento disponível.
Limpando as áreas de armazenamento
O estado de sessão é liberado assim que a última janela que faz referência aos dados é fechada. No entanto, os usuários podem limpar áreas de armazenamento a qualquer momento selecionando Excluir Histórico de Navegação, no menu Ferramentas do Internet Explorer, marcando a caixa de seleção Cookies e clicando em OK. Isso limpará as áreas de sessão e de armazenamento local para todos os domínios que não estejam na pasta Favoritos e reiniciará as cotas de armazenamento no Registro. Desmarque a caixa de seleção Preservar Dados de Sites Favoritos para excluir todas as áreas de armazenamento, independentemente da origem.
Para excluir pares de chave/valor de uma lista de armazenamento, itere sobre a coleção com removeItem ou use clear para remover todos os itens imediatamente. Lembre-se de que as alterações feitas em uma área de armazenamento local são salvas no disco de forma assíncrona.