Carrinho de compras com localStorage do HTML 5

Fazer um carrinho de compras é bem simples. Através da API localStorage do HTML 5 podemos facilmente gravar informações no navegador do visitante usando HTML e JS.

Gravando dados

Para gravar dados na localStorage usamos a seguinte sintaxe:

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

Vamos criar uma função JS que irá receber o nome do produto, a quantidade escolhida pelo visitante, o valor total da seleção e a posição do produto no carrinho.

<script>
 function AddCarrinho(produto, qtd, valor, posicao)
 { 
 localStorage.setItem("produto" + posicao, produto);
 localStorage.setItem("qtd" + posicao, qtd);
 valor = valor * qtd;
 localStorage.setItem("valor" + posicao, valor);
 alert("Produto adicionado ao carrinho!");
 }
</script>

OBS: Recomendá-se que gravações na localStorage sejam realizadas ao final do carregamento da página, ou seja, programe o script JS antes da tag </BODY>

Agora vamos programar o botão;

<button type="button" id="adicionar1" id="produto1" onclick="AddCarrinho('Sabão', document.getElementById('qtd1').value, '2.00', 1)"> Comprar </button>

Repetimos o código para os outros botões de compra, apenas trocar a posição 1 para 2 e assim por diante.

Lendo os dados e exibindo na página

A sintaxe de leitura é;

localStorage.getItem("nome_do_campo");

A leitura da localStorage exige o uso de uma rotina de repetição, preferencialmente o for(). A repetição terá o objetivo de ler todas as posições existentes na localStorage. Em outra página, crie o seguinte código;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<meta charset="UTF-8">
<div id="itens"> </div>
<div>Total: <span id="total"></span> </div>
 
<script>
 var total = 0; // variável que retorna o total dos produtos que estão na LocalStorage.
 var i = 0;     // variável que irá percorrer as posições
 var valor = 0; // variável que irá receber o preço do produto convertido em Float.
 
 for(i=1; i<=99; i++) // verifica até 99 produtos registrados na localStorage
 {
	 var prod = localStorage.getItem("produto" + i + ""); // verifica se há recheio nesta posição. 
	 if(prod != null) 
	 {	
		 // exibe os dados da lista dentro da div itens
		 document.getElementById("itens").innerHTML += localStorage.getItem("qtd" + i) + " x ";
		 document.getElementById("itens").innerHTML += localStorage.getItem("produto" + i);
		 document.getElementById("itens").innerHTML += " ";
		 document.getElementById("itens").innerHTML += "R$: " + 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>
 
<button type="button" onclick=" localStorage.clear(); location.reload();"> Limpar carrinho </button>

Removendo itens e limplando a localStorage

Para limpar toda a localStorage:

localStorage.clear();

Para remover apenas um item específico:

localStorage.removeItem("campo_que_deseja_remover");

Download

O exemplo usado nesta aula pode ser baixado aqui: localStorage

 

Deixe seu comentário