Gravando dados no dispositivo com a API LocalStorage

O HTML 5 trás consigo diversas APIs que podem ser acionadas via JS. Uma delas é a LocalStorage que funciona igual à um cookie, porém, com espaço maior, melhor organizada, mais segura, não viola a privacidade do visitante do seu site e os dados ficam disponíveis até que realmente o visitante do site decida excluí-los.

Se você realmente necessita deixar alguma informação guardada no dispositivo do usuário uma alternativa eficiente é usar esta API, ela muitas vezes complementa o CACHE MANIFEST visto na aula anterior.

Sua utilização se dá pelo uso de vetores, portanto, não podemos comparar a API LocalStorage com um banco de dados, mas, ela é muito eficiente quando precisamos guardar alguns dados.

Sintaxe

A sintaxe desta API é bem simples, usando JS para escrever valores com setItem:

localStorage.setItem("nome_do_campo", "valor");

E a leitura é feita apenas indicando nome do campo que deseja ler usando getItem.

localStorage.getItem("nome_do_campo");

Exemplo – Gravando dados

Vamos criar um app bem simples onde o usuário escolhe o recheio de uma pizza e armazena no navegador.

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 <title>Lista de Ofertas</title> 
 
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<link rel="stylesheet" href="boostrap/css/bootstrap.min.css">
<link rel="stylesheet" href="boostrap/css/bootstrap-theme.min.css">
<script src="./bootstrap/js/bootstrap.min.js"></script>
<style>
 @-ms-viewport { width: 100vw ; zoom: 100% ; } @viewport { width: 100vw ; zoom: 100% ; }
 @-ms-viewport { user-zoom: fixed ; } @viewport { user-zoom: fixed ; }
</style>

</head>

<body>
<div class="container">
 <div class="jumbotron">
 <h1>Escolha o sabor da sua pizza!</h1>
 </div> 
 <div class="row" align="center">
 <button type="button" class="btn" onclick="GravaItem('calabresa','2.30')"> calabresa </button>
 <button type="button" class="btn" onclick="GravaItem('muçarela','3.10')"> muçarela </button>
 <button type="button" class="btn" onclick="GravaItem('salame','6.20')"> salame </button>
 <button type="button" class="btn" onclick="GravaItem('lombo canadense ','4.10')"> lombo canadense </button>
 <button type="button" class="btn" onclick="GravaItem('catupiry','2.40')"> catupiry </button>
 </div>
 
 <div class="row">
 <hr> 
 <h2 align="center"><a href="lista.html"> Finalizar Pedido </a></h2>
 </div>
</div>

<script>
 function GravaItem(recheio, valor)
 {
 var i=0; //variável que irá indexar o vetor.

 for(i=0; i<=999; i++)
 {
    var prod = localStorage.getItem("recheio[" + i + "]");
    var indice = i; //precisamos saber quantos recheios já temos para gerar o próx. índice do vetor.
    
    //verifica se há recheios armazenados na LocalStorage
    if(prod == null) 
    { 
      break; //não tiver recheios, saia do for;
    } 
 
 }
 
 // Grava o recheio com o novo índice. 
 localStorage.setItem("recheio["+ indice +"]", recheio);
 localStorage.setItem("valor["+ indice +"]", valor);
 alert("Gravado!");
 indice++; //1 
 
 }
</script> 
</body>
</html>

Exemplo – Lendo dados

Agora em outra página vamos ler os dados e exibir no documento;

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 <title>Lista de Recheios.</title> 
 
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<link rel="stylesheet" href="boostrap/css/bootstrap.min.css">
<link rel="stylesheet" href="boostrap/css/bootstrap-theme.min.css">
<script src="./bootstrap/js/bootstrap.min.js"></script>
<style>
 @-ms-viewport { width: 100vw ; zoom: 100% ; } @viewport { width: 100vw ; zoom: 100% ; }
 @-ms-viewport { user-zoom: fixed ; } @viewport { user-zoom: fixed ; }
</style>
 
</head>

<body>
<div class="container">

<div id="resultado"></div> 
<div><h3>Total R$: <span id="total"></span></h3></div> 

<script>
 var total = 0; // variável que retorna o total dos preços dos recheios que estão na LocalStorage.
 var i = 0;     // variável que irá percorrer o vetor.
 var valor = 0; // variável que irá receber o preço do recheio convertido em Float.
 
 for(i=0; i<=999; i++)
 {
 var prod = localStorage.getItem("recheio[" + i + "]"); // verifica se há recheio nesta posição. 
 if(prod == null) break; //quando acabarem os recheios ou se não houverem recheios, saia do for.
 
 // exibe os dados da lista dentro da div resultado
 document.getElementById("resultado").innerHTML += (i+1) + " - ";
 document.getElementById("resultado").innerHTML += localStorage.getItem("recheio[" + i + "]");
 document.getElementById("resultado").innerHTML += " ";
 document.getElementById("resultado").innerHTML += localStorage.getItem("valor[" + i + "]") + "<hr>";
 
 // calcula o total dos recheios
 valor = parseFloat(localStorage.getItem("valor[" + i + "]")); // valor convertido com o parseFloat()
 total = (total + valor); // arredonda para 2 casas decimais com o .toFixed(2)
 }

 // exibe o total dos recheios
 document.getElementById("total").innerHTML = total.toFixed(2); 
</script>


<div align="center">
 <button type="button" class="btn" onclick="localStorage.clear(); document.getElementById('resultado').innerHTML =''; document.getElementById('total').innerHTML ='0'">
 Limpar lista
 </button>
 <button type="button" class="btn" onclick="window.history.go(-1);">
 Voltar
 </button>
</div>

</div>
</body>
</html>

A prova dos 9

Agora vamos testar tudo isso na prática. Feche seu navegador, abra-o novamente e veja se os dados gravados sumiram. Desligue seu computador, vá dormir e amanhã veja se os dados ainda estão lá. Sim, eles estarão. Saia de férias, volte daqui alguns meses e veja se os dados ainda estão lá! Sim, estarão.

Exemplo para download

Tá aí, bons estudos: RecheioPizza.zip