Guia completo sobre o HTML5 Web Storage

A Web Storage é uma nova API HTML5 que oferece benefícios importantes sobre os cookies tradicionais. Embora a especificação ainda esteja no status de rascunho do W3C, todos os principais navegadores já o sustentam. Isso significa que você pode começar a usar as APIs sessionStorage e localStorage Objetos (discutiremos isso mais tarde) e desfrutaremos de seus benefícios.

As limitações dos cookies

Primeiro, havia biscoitos.

Eles têm sido um enorme fator determinante para a Web desde os primeiros dias. De uma maneira boa e ruim. Por exemplo, os cookies nos permitem fazer login automaticamente em sites que usamos com frequência, como Gmail e Facebook.

Por outro lado, com biscoitos, nosso Pesquisar e navegar a história pode ser rastreada E nossa privacidade é uma preocupação. Outro problema com os cookies é que eles têm limitações de capacidade de dados. O limite de armazenamento de dados dos cookies em muitos navegadores da Web é de cerca de 4 kb por cookie, com base em uma especificação de 1997, recomendando um mínimo de 4096 bytes por cookie.

Embora a maioria dos navegadores permita 30 a 50 cookies; portanto, se você exceder o limite de 4 kb de um cookie, poderá criar outro, isso ainda é uma limitação real. É por isso que os desenvolvedores geralmente armazenam apenas identificadores de usuário e/ou sessão em cookies e, em seguida, usam bancos de dados do lado do servidor para armazenar e obter o restante dos dados do usuário. Além disso, um efeito colateral frequentemente esquecido dos cookies é que eles são sempre enviados com todas as solicitações HTTP (geralmente até para imagens), resultando em mais dados sendo enviados sobre o fio.

Avançando com armazenamento na web

O armazenamento da Web leva de onde os biscoitos pararam.

A força do armazenamento na web está em pelo menos duas coisas. Primeiro, facilidade de uso para desenvolvedores da Web: ele possui uma API simples para obter e definir pares de chave/valor (vamos nos aprofundar mais abaixo). Em segundo lugar, a quantidade de espaço que ele fornece: as especificações padrão da decisão da cota de espaço em disco para o agente do usuário (ou seja,

os desenvolvedores do navegador da web) e a maioria deles oferece nada menos que 5 ou 10 MB a ser armazenada por domínio. Isso significa que podemos armazenar mais do que apenas informações básicas do usuário/sessão no lado do cliente: configurações de preferência do usuário, dados de localização, armazenamento offline temporário para gravações de servidor em lote e muito mais. Os dados armazenados podem ser acessados ​​usando o JavaScript, o que oferece a capacidade de aproveitar o script do lado do cliente para fazer muitas coisas que tradicionalmente envolvem a programação do lado do servidor e bancos de dados relacionais.

Armazenamento de sessão e armazenamento local

É importante saber que existem dois tipos de objetos de armazenamento da Web: sessionStorage e localStorage.

sessionStorage está disponível apenas na guia do navegador ou sessão de janela. Ele foi projetado para armazenar dados em uma única sessão de página da web. localStorage é mantido mesmo entre as sessões do navegador.

Isso significa que os dados ainda estão disponíveis quando o navegador é fechado e reaberto e também instantaneamente entre as guias e o Windows. Os dados de armazenamento da Web estão, em ambos os casos, não disponíveis entre diferentes navegadores. Por exemplo, objetos de armazenamento criados no Firefox não podem ser acessados ​​no Internet Explorer, exatamente como cookies.

Onde usar o armazenamento da web

Alguns exemplos de cenários de implementação incluem armazenar os dados para uma lista de tarefas on-line (depois empurrar para o servidor em intervalos em vez de em tempo real) ou salvar produtos que o usuário coloca em seu carrinho de compras.

Os dados podem ser disponibilizados entre solicitações de página, várias guias do navegador e também entre sessões do navegador usando localStorage. Seus aplicativos podem realmente ser usados ​​offline completamente usando localStorage. Os dados podem ser enviados e armazenados no lado do servidor quando o usuário estiver online novamente.

De outra perspectiva, o armazenamento da Web pode ser uma ótima vitória de desempenho quando alguns dados estáticos são armazenados no cliente para minimizar o número de solicitações subsequentes. Até as imagens podem ser armazenadas em strings usando a codificação Base64. Para os exemplos mencionados acima, faz sentido usar localStorage.

Você pode estar se perguntando, então, quando deve optar por sessionStorage. Em alguns casos, você simplesmente deseja se livrar dos dados assim que a janela estiver fechada. Ou, talvez, você não queira que o aplicativo interfira no mesmo aplicativo que está aberto em outra janela (por exemplo

Ao executar duas instâncias de um jogo de Scrabble ou executar vários testes de unidade simultaneamente, você não deseja que os dados colidam). Esses cenários são servidos melhor com sessionStorage.

Usando a API de armazenamento da Web

É realmente simples. Provavelmente é melhor apenas mostrar:

sessionStorage.setItem('myKey', 'myValue'); var myVar = sessionStorage.getItem('myKey'); localStorage.setItem('myKey', 'myValue'); var myVar = localStorage.getItem('myKey');

Observe que a interface para criar sessionStorage e localStorage é idêntico e que eles são objetos globais.

Você pode usar o .setItem método para definir a chave e seu valor e depois .getItem Para recuperar o valor de uma chave específica. Observe que só podemos armazenar strings, o que é uma desvantagem significativa. No entanto, para contornar isso, podemos armazenar e recuperar representações de string de objetos JSON usando o JSON.stringify() método para armazenar uma string e JSON.parse() Para criar o objeto original a partir dessa string.

Eventos de armazenamento na Web

Sempre que armazenamos dados em localStorageo storage O evento é disparado em outras janelas/guias do navegador.

O que há de tão bom nisso? Este evento pode ser usado para superar o chamado condições de corrida Entre Windows/guias do navegador: se o usuário tiver o mesmo site aberto em guias diferentes, este evento poderá ser usado para sincronizar os dados. (Isso foi realmente um problema com os cookies.) O storage O evento só é disparado quando o novo valor não é o mesmo que o valor antigo.

O evento de armazenamento contém o keyAssim, oldValue e newValue Propriedades dos dados que mudaram, que você pode acessar no código. Exemplo Código:

window.addEventListener('storage', function(event) { console.log('The value for ' + event.key + ' was changed from' + event.oldValue + ' to ' + event.newValue); }, false);

Acima, criamos um ouvinte de evento no window objeto para o storage evento. Quando o evento acontece, uma função que registra o keyAssim, oldValue e newValue para o seu console (por exemplo

Ferramentas de desenvolvedor Firebug ou Google Chrome) é executado.

Suporte ao navegador para armazenamento na web

Você é incentivado a começar a usar esta API hoje. O armazenamento da Web é implementado no IE8 e em todos os navegadores modernos (ou seja, a partir do Firefox 3.5, Safari 4, Google Chrome 4 e Opera 10.50).

O storage O evento foi adicionado mais tarde, mas está disponível em pelo menos Firefox 5, Safari 5, Chrome 12, Opera 10.5 e, no IE9,.

Preocupações de segurança

Esteja ciente de que o uso do armazenamento da Web não é realmente mais seguro que os cookies. Com maior poder, vem maior responsabilidade. O SSL faz muito para resolver problemas de segurança.

(SSL significa que o cliente e o servidor comunicam apenas dados criptografados). É por isso que você vê mais e mais sites usando os mais seguros https protocolo. De qualquer forma, não armazene dados confidenciais (como senhas e números de cartão de crédito) no lado do cliente, nem envie esse tipo de dados ao cliente.

Notas finais

O armazenamento da web às vezes é referido como Armazenamento domisso é a mesma coisa.

O último é derivado do fato de que os dados são realmente armazenados no JavaScript’s window objeto (ou seja window.localStorage e window.sessionStorage). E por último, mas não menos importante, lembre -se de que o armazenamento da Web, assim como os cookies, pode ser desligado pelo usuário.

Então você sempre precisa implementar um mecanismo de fallback, caso window.sessionStorage ou window.localStorage não está disponível.

Leitura adicional

Conteúdo relacionado