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.

Criando a página de Produtos

Vamos criar algo simples, uma página com 3 produtos na qual você pode adicionar mais depois caso queira, esta página você encontrará no download disponível no fim do artigo.

Gravando dados

Os botões COMPRAR irão disparar um evento JavaScript e irão armazenar os dados no locaStorage do seu navegador. 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 de compra;

<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 do carrinho.

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;

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

O resultado será este;

Removendo itens do carrinho e limpando a localStorage

Para limpar toda a localStorage:

localStorage.clear();

Você pode também implementar um botão para remover um item específico, neste caso você deverá usar a seguinte sintaxe:

localStorage.removeItem("campo_que_deseja_remover");

Download Gratuito

O exemplo usado nesta aula pode ser baixado aqui clicando no botão abaixo;