Como utilizar o Web Storage (armazenamento DOM)?

Por
| 

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.

Como utilizar o Web Storage (armazenamento DOM)

Í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.

Ir para o índice

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.

Ir para o índice

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());
}

Ir para o índice

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"));
}

Ir para o índice

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'
    */
}

Ir para o índice

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'
    */
}

Ir para o índice

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'
    */
}

Ir para o índice

Leia também

Referências


Siga o blog

Redes sociais: Facebook, Twitter, YouTube, Pinterest, Instagram

Receba notificações de novas postagens e novidades do blog por e-mail.

Importante: utilize o bom senso na hora de comentar. Acesse a política de privacidade para maiores informações sobre comentários.

Nenhum comentário:

Postar um comentário