Criando um carrinho de compras com armazenamento na Web HTML5

Com o advento do HTML5, muitos sites foram capazes de substituir o plugin e códigos JavaScript por códigos HTML simples e mais eficientes, como áudio, vídeo, geolocalização, etc. As tags HTML5 tornaram o trabalho dos desenvolvedores muito mais fácil, melhorando o tempo de carregamento da página e o desempenho do site. Em particular, o armazenamento na web HTML5 foi um divisor de águas, pois permite que os navegadores dos usuários armazenem dados do usuário sem usar um servidor. Portanto, a criação de armazenamento na Web permitiu que os desenvolvedores front-end realizassem mais em seu site sem saber ou usar codificação ou banco de dados do lado do servidor.

Os sites de comércio eletrônico online usam predominantemente linguagens do lado do servidor, como PHP, para armazenar os dados dos usuários e passá-los de uma página para outra. Usando estruturas de back-end JavaScript, como Node.js, podemos atingir o mesmo objetivo. No entanto, neste tutorial, mostraremos passo a passo como criar um carrinho de compras com HTML5 e alguns códigos JavaScript menores. Outros usos das técnicas neste tutorial seriam armazenar as preferências do usuário, o conteúdo favorito do usuário, listas de desejos e configurações do usuário como nome e senha em sites e aplicativos móveis nativos sem usar um banco de dados.

Muitos sites de alto tráfego dependem de técnicas complexas, como clustering de servidores, balanceadores de carga DNS, cache do lado do cliente e do lado do servidor, bancos de dados distribuídos e microsserviços para otimizar o desempenho e a disponibilidade. De fato, o maior desafio para sites dinâmicos é buscar dados de um banco de dados e usar uma linguagem do lado do servidor, como PHP, para processá-los. No entanto, o armazenamento de banco de dados remoto deve ser usado apenas para conteúdo essencial do site, como artigos e credenciais de usuário. Recursos como preferências do usuário podem ser armazenados no navegador do usuário, semelhante aos cookies. Da mesma forma, ao criar um aplicativo móvel nativo, você pode usar o armazenamento da Web HTML5 em conjunto com um banco de dados local para aumentar a velocidade do seu aplicativo. Assim, como desenvolvedores front-end, precisamos explorar maneiras de explorar o poder do armazenamento da Web HTML5 em nossos aplicativos nos estágios iniciais de desenvolvimento.

Eu fiz parte de uma equipe desenvolvendo um site social em larga escala e usamos muito o armazenamento da Web HTML5. Por exemplo, quando um usuário faz login, armazenamos o ID do usuário com hash em uma sessão HTML5 e o usamos para autenticar o usuário em páginas protegidas. Também usamos esse recurso para armazenar todas as novas notificações push — como novas mensagens de bate-papo, mensagens do site e novos feeds — e passá-las de uma página para outra. Quando um site social recebe alto tráfego, a dependência total do servidor para balanceamento de carga pode não funcionar, portanto, você precisa identificar tarefas e dados que podem ser manipulados pelo navegador do usuário em vez de seus servidores.

Histórico do projeto

Um carrinho de compras permite que o visitante de um site visualize páginas de produtos e adicione itens à sua cesta. O visitante pode revisar todos os seus itens e atualizar sua cesta (como adicionar ou remover itens). Para isso, o site precisa armazenar os dados do visitante e passá-los de uma página para outra, até que o visitante vá para a página de checkout e faça uma compra. O armazenamento de dados pode ser feito por meio de uma linguagem do lado do servidor ou do lado do cliente. Com uma linguagem do lado do servidor, o servidor suporta o peso do armazenamento de dados, enquanto que com uma linguagem do lado do cliente, o computador do visitante (desktop, tablet ou smartphone) armazena e processa os dados. Cada abordagem tem seus prós e contras. Neste tutorial, vamos nos concentrar em uma abordagem simples do lado do cliente, baseada em HTML5 e JavaScript.

Nota : Para poder seguir este tutorial, é necessário conhecimento básico de HTML5, CSS e JavaScript.

Arquivos de projeto

Clique aqui para baixar os arquivos fonte do projeto. Você também pode ver uma demonstração ao vivo.

Visão geral do armazenamento da Web HTML5

O armazenamento da Web HTML5 permite que os aplicativos da Web armazenem valores localmente no navegador que podem sobreviver à sessão do navegador, assim como os cookies. Ao contrário dos cookies que precisam ser enviados com cada solicitação HTTP, os dados de armazenamento na web nunca são transferidos para o servidor; assim, o armazenamento na web supera os cookies no desempenho da web. Além disso, os cookies permitem armazenar apenas 4 KB de dados por domínio, enquanto o armazenamento na Web permite pelo menos 5 MB por domínio. O armazenamento na Web funciona como um array simples, mapeando chaves para valores, e eles têm dois tipos:

• Armazenamento de sessão
  Isso armazena dados em uma sessão do navegador, onde ficam disponíveis até que o navegador ou a guia do navegador seja fechada. Janelas pop-up abertas na mesma janela podem ver o armazenamento da sessão, assim como os iframes dentro da mesma janela. No entanto, várias janelas da mesma origem (URL) não podem ver o armazenamento de sessão uma da outra.
• Armazenamento local
  Isso armazena dados no navegador da Web sem data de validade. Os dados ficam disponíveis para todas as janelas com a mesma origem (domínio), mesmo quando o navegador ou as abas do navegador são reabertas ou fechadas.

Ambos os tipos de armazenamento são atualmente suportados em todos os principais navegadores da web. Lembre-se de que você não pode passar dados de armazenamento de um navegador para outro, mesmo que ambos os navegadores estejam visitando o mesmo domínio.

Construir um carrinho de compras básico

Para construir nosso carrinho de compras, primeiro criamos uma página HTML com um carrinho simples para mostrar os itens e um formulário simples para adicionar ou editar o carrinho. Em seguida, adicionamos armazenamento web HTML a ele, seguido pela codificação JavaScript. Embora estejamos usando tags de armazenamento local HTML5, todas as etapas são idênticas às do armazenamento de sessão HTML5 e podem ser aplicadas a tags de armazenamento de sessão HTML5. Por fim, veremos alguns códigos jQuery, como uma alternativa ao código JavaScript, para os interessados ​​em usar jQuery.

Adicionar armazenamento local HTML5 ao carrinho de compras

Nossa página HTML é uma página básica, com tags para JavaScript e CSS externos referenciados no cabeçalho.

 <!doctype html> <html lang="en-US"> <head> <title>HTML5 Local Storage Project</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="rating" content="General"> <meta name="expires" content="never"> <meta name="language" content="English, EN"> <meta name="description" content="Shopping cart project with HTML5 and JavaScript"> <meta name="keywords" content="HTML5,CSS,JavaScript, html5 session storage, html5 local storage"> <meta name="author" content="dcwebmakers.com"> <script src="Storage.js"></script> <link rel="stylesheet" href="StorageStyle.css"> </head>

Abaixo está o conteúdo HTML que aparece no corpo da página:

 <form name="ShoppingList"> <fieldset> <legend>Shopping cart</legend> <label>Item: <input type="text" name="name"></label> <label>Quantity: <input type="text" name="data"></label> <input type="button" value="Save"> <input type="button" value="Update"> <input type="button" value="Delete"> </fieldset> <div> <h2>Shopping List</h2> <table></table> <label><input type="button" value="Clear"> * Delete all items</label> </div> </form>

Adicionando JavaScript ao carrinho de compras

Criaremos e chamaremos a função JavaScript doShowAll() no evento onload() para verificar o suporte do navegador e criar dinamicamente a tabela que mostra o par nome-valor do armazenamento.

 <body onload="doShowAll()">

Como alternativa, você pode usar o evento onload JavaScript adicionando isso ao código JavaScript:

 window.load=doShowAll();

Ou use isso para jQuery:

 $( window ).load(function() { doShowAll(); });

Na função CheckBrowser() , gostaríamos de verificar se o navegador suporta armazenamento HTML5. Observe que esta etapa pode não ser necessária porque a maioria dos navegadores modernos a suporta.

 /* =====> Checking browser support. //This step might not be required because most modern browsers do support HTML5. */ //Function below might be redundant. function CheckBrowser() { if ('localStorage' in window && window['localStorage'] !== null) { // We can use localStorage object to store data. return true; } else { return false; } }

Dentro do doShowAll() , se a função CheckBrowser() avaliar primeiro o suporte do navegador, ela criará dinamicamente a tabela para a lista de compras durante o carregamento da página. Você pode iterar as chaves (nomes de propriedades) dos pares chave-valor armazenados no armazenamento local dentro de um loop JavaScript, conforme mostrado abaixo. Com base no valor de armazenamento, esse método preenche a tabela dinamicamente para mostrar o par chave-valor armazenado no armazenamento local.

 // Dynamically populate the table with shopping list items. //Step below can be done via PHP and AJAX, too. function doShowAll() { if (CheckBrowser()) { var key = ""; var list = "<tr><th>Item</th><th>Value</th></tr>\n"; var i = 0; //For a more advanced feature, you can set a cap on max items in the cart. for (i = 0; i <= localStorage.length-1; i++) { key = localStorage.key(i); list += "<tr><td>" + key + "</td>\n<td>" + localStorage.getItem(key) + "</td></tr>\n"; } //If no item exists in the cart. if (list == "<tr><th>Item</th><th>Value</th></tr>\n") { list += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td></tr>\n"; } //Bind the data to HTML table. //You can use jQuery, too. document.getElementById('list').innerHTML = list; } else { alert('Cannot save shopping list as your browser does not support HTML 5'); } }

Observação : você ou sua estrutura terão um método preferencial para criar novos nós DOM e manipular eventos. Para manter as coisas claras e focadas, nosso exemplo usa .innerHTML e manipuladores de eventos embutidos, embora normalmente evitemos isso no código de produção.

Dica: Se você quiser usar jQuery para vincular dados, basta substituir document.getElementById('list').innerHTML = list; com $('#list').html()=list; .

Executar e testar o carrinho de compras

Nas duas seções anteriores, adicionamos código ao cabeçalho HTML e adicionamos HTML ao formulário e à cesta do carrinho de compras. Também criamos uma função JavaScript para verificar o suporte do navegador e preencher a cesta com os itens no carrinho. Ao preencher os itens da cesta, o JavaScript busca valores do armazenamento da Web HTML, em vez de um banco de dados. Nesta parte, mostraremos como os dados são inseridos no mecanismo de armazenamento HTML5. Ou seja, usaremos o armazenamento local HTML5 em conjunto com JavaScript para inserir novos itens no carrinho de compras, bem como editar um item existente no carrinho.

Nota : Eu adicionei seções de dicas abaixo para mostrar o código jQuery, como uma alternativa aos JavaScript.

Criaremos um elemento div HTML separado para capturar a entrada e o envio do usuário. Anexaremos a função JavaScript correspondente no evento onClick para os botões.

 <input type="button" value="Save"> <input type="button" value="Update"> <input type="button" value="Delete">

Você pode definir propriedades no objeto localStorage semelhantes a um objeto JavaScript normal. Aqui está um exemplo de como podemos definir a propriedade de armazenamento local myProperty para o valor myValue :

 localStorage.myProperty="myValue";

Você pode excluir a propriedade de armazenamento local assim:

 delete localStorage.myProperty;

Como alternativa, você pode usar os seguintes métodos para acessar o armazenamento local:

 localStorage.setItem('propertyName','value'); localStorage.getItem('propertyName'); localStorage.removeItem('propertyName');

Para salvar o par chave-valor, obtenha o valor do objeto JavaScript correspondente e chame o método setItem :

 function SaveItem() { var name = document.forms.ShoppingList.name.value; var data = document.forms.ShoppingList.data.value; localStorage.setItem(name, data); doShowAll(); }

Abaixo está a alternativa jQuery para a função SaveItem . Primeiro, adicione um ID às entradas do formulário:

 <label>Item: <input type="text" name="name"></label> <label>Quantity: <input type="text" name="data"></label>

Em seguida, selecione as entradas do formulário por ID e obtenha seus valores. Como você pode ver abaixo, é muito mais simples que JavaScript:

 function SaveItem() { var name = $("#name").val(); var data = $("#data").val(); localStorage.setItem(name, data); doShowAll(); }

Para atualizar um item no carrinho de compras, primeiro você deve verificar se a chave desse item já existe no armazenamento local e, em seguida, atualizar seu valor, conforme mostrado abaixo:

 //Change an existing key-value in HTML5 storage. function ModifyItem() { var name1 = document.forms.ShoppingList.name.value; var data1 = document.forms.ShoppingList.data.value; //check if name1 is already exists //Check if key exists. if (localStorage.getItem(name1) !=null) { //update localStorage.setItem(name1,data1); document.forms.ShoppingList.data.value = localStorage.getItem(name1); } doShowAll(); }

Abaixo mostra a alternativa jQuery.

 function ModifyItem() { var name1 = $("#name").val(); var data1 = $("#data").val(); //Check if name already exists. //Check if key exists. if (localStorage.getItem(name1) !=null) { //update localStorage.setItem(name1,data1); var new_info=localStorage.getItem(name1); $("#data").val(new_info); } doShowAll(); }

Usaremos o método removeItem para excluir um item do armazenamento.

 function RemoveItem() { var name=document.forms.ShoppingList.name.value; document.forms.ShoppingList.data.value=localStorage.removeItem(name); doShowAll(); }

Dica: Semelhante às duas funções anteriores, você pode usar seletores jQuery na função RemoveItem .

Existe outro método para armazenamento local que permite limpar todo o armazenamento local. Chamamos a função ClearAll() no evento onClick do botão “Clear”:

 <input type="button" value="Clear">

Usamos o método clear para limpar o armazenamento local, conforme mostrado abaixo:

 function ClearAll() { localStorage.clear(); doShowAll(); }

Armazenamento de sessão

O objeto sessionStorage funciona da mesma forma que localStorage . Você pode substituir o exemplo acima pelo objeto sessionStorage para expirar os dados após uma sessão. Assim que o usuário fechar a janela do navegador, o armazenamento será limpo. Em resumo, as APIs para localStorage e sessionStorage são idênticas, permitindo que você use os seguintes métodos:

• setItem(key, value)
• getItem(key)
• removeItem(key)
• clear()
• key(index)
• length

Carrinhos de compras com arrays e objetos

Como o armazenamento da Web HTML5 oferece suporte apenas ao armazenamento de valor de nome único, você precisa usar JSON ou outro método para converter seus arrays ou objetos em uma única string. Você pode precisar de uma matriz ou objeto se tiver uma categoria e subcategorias de itens ou se tiver um carrinho de compras com vários dados, como informações do cliente, informações do item etc. Você só precisa implodir sua matriz ou itens de objeto em uma string para armazená-los no armazenamento da Web e, em seguida, explodi-los (ou dividi-los) de volta em uma matriz para mostrá-los em outra página. Vejamos um exemplo básico de um carrinho de compras que possui três conjuntos de informações: informações do cliente, informações do item e endereço de correspondência personalizado. Primeiro, usamos JSON.stringify para converter o objeto em uma string. Em seguida, usamos JSON.parse para reverter de volta.

Dica : Lembre-se de que o nome-chave deve ser exclusivo para cada domínio.

 //Customer info //You can use array in addition to object. var obj1 = { firstname: "John", lastname: "thomson" }; var cust = JSON.stringify(obj1); //Mailing info var obj2 = { state: "VA", city: "Arlington" }; var mail = JSON.stringify(obj2); //Item info var obj3 = { item: "milk", quantity: 2 }; var basket = JSON.stringify(obj3); //Next, push three strings into key-value of HTML5 storage. //Use JSON parse function below to convert string back into object or array. var New_cust=JSON.parse(cust);

Resumo

Neste tutorial, aprendemos como criar um carrinho de compras passo a passo usando armazenamento na Web HTML5 e JavaScript. Vimos como usar jQuery como uma alternativa ao JavaScript. Também discutimos funções JSON como stringify e parse para manipular arrays e objetos em um carrinho de compras. Você pode desenvolver este tutorial adicionando mais recursos, como adicionar categorias e subcategorias de produtos enquanto armazena dados em uma matriz multidimensional JavaScript. Além disso, você pode substituir todo o código JavaScript por jQuery.

Vimos outras coisas que os desenvolvedores podem realizar com o armazenamento da Web HTML5 e quais outros recursos eles podem adicionar aos seus sites. Por exemplo, você pode usar este tutorial para armazenar preferências do usuário, conteúdo favorito, listas de desejos e configurações do usuário, como nomes e senhas em sites e aplicativos móveis nativos, sem usar um banco de dados.

Para concluir, aqui estão algumas questões a serem consideradas ao implementar o armazenamento na Web HTML5:

• Alguns usuários podem ter configurações de privacidade que impedem o navegador de armazenar dados.
• Alguns usuários podem usar o navegador no modo de navegação anônima.
• Esteja ciente de alguns problemas de segurança, como ataques de falsificação de DNS, ataques entre diretórios e comprometimento de dados confidenciais.

Leitura Relacionada

• “Limites de armazenamento do navegador e critérios de despejo”, documentos da web MDN, Mozilla
• “Armazenamento na Web”, HTML Living Standard,
• “Esta semana em HTML 5”, o blog WHATWG