Uma das desvantagens dos cookies é a baixa capacidade de armazenamento, com um limite de cerca de 4 KB por cookie (varia conforme o navegador).
Contudo, esses meros 4 KB são justificáveis, pois, toda vez que acessamos uma página, os cookies dela são enviados no cabeçalho da requisição. Seria desastroso para quem tem conexão lenta se não houvesse um limite.
Além disso, nem sempre precisamos que os cookies sejam enviados para o servidor, sendo suficiente que os mesmos sejam processados apenas no lado do cliente da aplicação.
Uma das soluções para o problema anterior é o Web Storage (ou armazenamento DOM): um recurso que oferece um espaço maior de armazenamento (5 MB por domínio [1], no mínimo) e não envia as informações armazenadas para o servidor.
Índice
O que é Web Storage?
O Web Storage faz parte da especificação do HTML 5, e provê dois métodos de armazenamento
- Armazenamento por sessão: os dados armazenados são excluídos após o usuário fechar o navegador. A manipulação das informações é feita através do objeto global
window.sessionStorage. - Armazenamento local (persistente): os dados armazenados não têm prazo de validade, permanecendo no dispositivo do usuário até que o mesmo limpe o cache do navegador ou até que a aplicação que gerou os dados apague-os. A manipulação das informações é feita através do objeto global
window.localStorage.
Como os dados são manipulados?
A manipulação dos dados é feita através da linguagem JavaScript, utilizando as funções setItem(chave, valor), removeItem(chave) e getItem(chave), que são comuns entre os objetos sessionStorage e localStorage.
Os valores são armazenados na forma de String e cada um possui uma "chave" que os identifica, análogo ao nome dos cookies.
Como utilizar?
Praticamente todos os navegadores modernos suportam o Web Storage. Entretanto, como ainda existem pessoas que utilizam navegadores antigos, então é importante verificar se há suporte para esse recurso.
O seguinte trecho do código da W3Schools [1] pode ser utilizado para isso
if (typeof(Storage) !== "undefined") { // o navegador suporta o Web Sortage } else { // o navegador NÃO suporta o Web Sortage }
Armazenando um item
Para armazenar um item basta utilizar a função setItem(chave, valor), onde chave é nome do valor armazenado. Se a chave já possuir um valor atribuído, este será substituído.
O exemplo a seguir armazena um número aleatório na chave com nome "blogcyberini" (o número é convertido para String antes de ser armazenado)
//armazena um número aleatório entre 0 e 1 na chave "blogcyberini" if(typeof(Storage) !== "undefined"){ //armazenamento sem prazo definido localStorage.setItem("blogcyberini", Math.random()); //armazenamento por sessão (até o navegador ser fechado) sessionStorage.setItem("blogcyberini", Math.random()); }
Obtendo um item
Para obter um item previamente gravado, utilize a função getItem(chave). O exemplo abaixo grava o valor "Olá mundo" na chave "mundo", obtém o item e exibe o valor numa caixa de diálogo.
if(typeof(Storage) !== "undefined"){ //armazenamento sem prazo definido localStorage.setItem("mundo", "Olá mundo"); var valor = localStorage.getItem("mundo"); alert(valor); //exibe o valor armazenado //armazenamento por sessão (até o navegador ser fechado) sessionStorage.setItem("mundo", "Olá mundo"); valor = sessionStorage.getItem("mundo"); alert(valor); //exibe o valor armazenado }
Se o item não existe, a função retorna null.
if(typeof(Storage) !== "undefined"){ //exibe "null", se a chave "nao-existe" não existir alert(localStorage.getItem("nao-existe")); }
Removendo um item
Um item armazenado pode ser removido com a função removeItem(chave).
if(typeof(Storage) !== "undefined"){ //armazena "Bom Dia" chave "blogcyberini" localStorage.setItem("blogcyberini", "Bom Dia"); //exibe uma caixa de diálogo com a mensagem "Bom Dia" alert(localStorage.getItem("blogcyberini")); //remove o valor da chave "blogcyberini" localStorage.removeItem("blogcyberini"); //exibe uma caixa de diálogo com a mensagem null alert(localStorage.getItem("blogcyberini")); /* * Para a versão com dados de sessão, substitua * 'localStorage' por 'sessionStorage' */ }
Armazenando objetos
Originalmente, o Web Storage deveria armazenar objetos, entretanto isso não foi possível devido a bugs, o que acabou limitando o recurso apenas a valores do tipo String.
Entretanto, podemos converter objetos da linguagem JavaScript para String com a função JSON.stringify(), possibilitando o armazenamento de estruturas de dados mais complexas.
Depois, para ler e utilizar o objeto, basta utilizar o método JSON.parse(), que converte uma String na notação JSON para um objeto em JavaScript.
Alguns cuidados devem ser tomados, no entanto. A notação JSON não aceita funções, portanto, se o seu objeto tiver alguma função, esta será ignorada.
As datas também não são aceitas, porém, nesse caso, o JSON.stringify() irá converter a data para uma String. Por exemplo, o objeto new Date(2018, 08, 16) seria convertido para String 2018-09-16T03:00:00.000Z.
Felizmente, podemos recuperar o objeto original passando a String como argumento do construtor de Date: new Date("2018-09-16T03:00:00.000Z").
O trecho de código a seguir ilustra o armazenamento de objetos em JavaScript utilizando JSON.stringify() e Web Storage.
if(typeof(Storage) !== "undefined"){ //define um objeto var dadosBlog = { nome: "Blog Cyberini", url: "https://www.blogcyberini.com" }; //converte o objeto para uma String var objString = JSON.stringify(dadosBlog); //armazena a string do objeto na chave "blogcyberini" localStorage.setItem("blogcyberini", objString); //obtém o valor armazenado var valorArmazenado = localStorage.getItem("blogcyberini"); //exibe uma caixa de diálogo com o valor armazenado alert(valorArmazenado); //converte a String para objeto var objRestaurado = JSON.parse(valorArmazenado); //exibe uma caixa de diálogo com os dados do objeto alert("Nome: " + objRestaurado.nome + "\nURL: " + objRestaurado.url); /* * Para a versão com dados de sessão, substitua * 'localStorage' por 'sessionStorage' */ }
Resolvendo o problema do armazenamento sem prazo de validade
Suponhamos que você queira armazenar uma informação com o localStorage, mas deseja limitar o prazo de validade dessa informação.
Como no localStorage as informações são gravadas por prazo indefinido, então você precisa criar algum mecanismo que verifique se aquela informação ainda é válida na data que o usuário acessou a página.
Uma alternativa é armazenar a informação num objeto e, neste mesmo objeto, atribuir uma propriedade com a data de validade da informação.
O código a seguir armazena na chave "testeData" um objeto com um número aleatório entre 0 e 1 e um objeto Date com a data de validade da informação (um ano depois da data de criação do objeto).
if(typeof(Storage) !== "undefined"){ //data atual var hoje = new Date(); //define o objeto var info = { //número aleatório entre 0 e 1 numero: Math.random(), //validade = hoje + 1 ano validade: hoje.setFullYear(hoje.getFullYear() + 1) }; //converte o objeto para uma String var objString = JSON.stringify(info); //armazena a string do objeto na chave "blogcyberini" localStorage.setItem("testeData", objString); //obtém o valor armazenado var valorArmazenado = localStorage.getItem("testeData"); //exibe uma caixa de diálogo com o valor armazenado alert(valorArmazenado); //converte a String para objeto var objRestaurado = JSON.parse(valorArmazenado); //exibe uma caixa de diálogo com os dados do objeto alert("Número: " + objRestaurado.numero + "\nValidade: " + new Date(objRestaurado.validade)); /* * Para a versão com dados de sessão, substitua * 'localStorage' por 'sessionStorage' */ }
Leia também
Referências
- [1] W3Schools. HTML5 Web Storage. Acesso em 16/09/2018.
- [2] MDN web docs. Web Storage Conceitos e formas de uso. Acesso em 16/09/2018.
Nenhum comentário:
Postar um comentário