Frequentemente precisamos armazenar dados no navegador do usuário, normalmente fazemos isso usando cookies. O problema é que a cada requisição ao servidor os cookies também são enviados. Então, a performance do site pode ficar comprometida dependendo do que você armazenar.

Outra vantagem é que o web storage permite armazenar até 5MB, já os cookies conseguem no máximo 80 kB (grande diferença!).

Existem dois tipos de HTML Web Storage. A localStorage e a sessionStorage.

localStorage

O localStorage permite guardar informações sem datas de expiração, isto significa que mesmo depois de fechar o navegador as informações vão estar lá (se o usuário ou o programador não deletar explicitamente). Para usar o localStorage é bem fácil, basta usar localStorage.setItem(chave, valor) veja:

localStorage.setItem("nome", "José Silva");

Agora crie uma outra página e tente recuperar o valor. Use getItem(chave);

console.log(localStorage.getItem("nome")); 

Para deletar use localStorage.removeItem(chave):

console.log(localStorage.removeItem("nome")); 

Vamos fazer um Call of Duty joguinho tosco

Podemos fazer um joguinho para exercitar nossos conceitos de HTML/CSS e Javascript. Vamos usar localStorage e animações em css. É tosco, mas é somente para aprendermos. O objetivo do jogo é acertar os alvos que mexem, se o usuário acertar contamos o ponto e indicamos onde ele acertou. Tudo será armazenado com local Storage.

Então considere o seguinte HTML:

<h1>Acerte um político</h1>
<div class="container">
    <div class="personagens">
        <div class="personagem" data-id="lula"></div>
        <div class="personagem" data-id="aecio"></div>
        <div class="personagem" data-id="cunha"></div>

    </div>
</div>
<div>
     <h3>Acertos</h3>
     <p><i>Acerte</i></p>
     <ul id="resultado">
         <li>Lula: <span id="lula">0</span></li>
         <li>Aécio: <span id="aecio">0</span></li>
         <li>Cunha: <span id="cunha">0</span></li>
     </ul>    
</div>

Agora o nosso Javascript:

window.onload = function () {

    var personagens = document.getElementsByClassName("personagem");
    
    for(var i = 0 ; i < personagens.length ; i++) {
       // recebeu um tiro
       personagens[i].onclick = function () {
           var idPersonagem = this.getAttribute("data-id");
           
           if(localStorage.getItem(idPersonagem)) {
               localStorage.setItem(idPersonagem, Number(localStorage.getItem(idPersonagem)) + 1) ;
           } else {
               localStorage.setItem(idPersonagem, 1) ;
           }           
           document.getElementById(idPersonagem).innerHTML =  localStorage.getItem(idPersonagem) ;
           
       }       
    }   
    
    
    function atualizarResultado(personagens) {
        for(var i = 0 ; i < personagens.length ; i++) {
           var idPersonagem = personagens[i].getAttribute("data-id");
           
           if(localStorage.getItem(idPersonagem)) {
               document.getElementById(idPersonagem).innerHTML =  localStorage.getItem(idPersonagem) ;          
           }           
           
       }       
    }
   
   atualizarResultado(personagens);
};

Explicando o código:

Para ver nosso joguinho tosco online clique aqui

Obs: Experimente fechar o navegador e abrir a página novamente. 🙂

Pressione F12 e vá até a aba application (no Chrome, no Firefox é semelhante) e veja os valores armazenados.

sessionStorage

A sessionStorage é igual a localStorage, exceto pelo fato de durar apenas enquanto a sessão estiver aberta. Então ela é deletada se fechar o browser ou a tab da página.

sessionStorage.setItem("nome", "Maria Silva"); // para criar
sessionStorage.getItem("nome");  // para recuperar
sessionStorage.removeItem("nome"); // para deletar

Compatibilidade

Por último mas não menos importante, podemos usar a detecção de objetos para saber se o browser do usuário é compatível com localStorage.

if (typeof(Storage) !== "undefined") {
    // este browser suporta web storage
} else {
    // vixi. Este browser não  suporta web storage
}