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