Creación de un carrito de compras con almacenamiento web HTML5

Con la llegada de HTML5, muchos sitios pudieron reemplazar el complemento y los códigos de JavaScript con códigos HTML simples y más eficientes, como audio, video, geolocalización, etc. Las etiquetas HTML5 facilitaron mucho el trabajo de los desarrolladores al tiempo que mejoraron el tiempo de carga de la página y el rendimiento del sitio. En particular, el almacenamiento web HTML5 cambió las reglas del juego, ya que permite que los navegadores de los usuarios almacenen datos de usuarios sin usar un servidor. Entonces, la creación del almacenamiento web permitió a los desarrolladores front-end lograr más en su sitio web sin saber o usar la codificación del lado del servidor o la base de datos.

Los sitios web de comercio electrónico en línea utilizan predominantemente lenguajes del lado del servidor, como PHP, para almacenar los datos de los usuarios y pasarlos de una página a otra. Usando marcos de back-end de JavaScript como Node.js, podemos lograr el mismo objetivo. Sin embargo, en este tutorial, le mostraremos paso a paso cómo crear un carrito de compras con HTML5 y código JavaScript menor. Otros usos de las técnicas de este tutorial serían almacenar las preferencias del usuario, el contenido favorito del usuario, las listas de deseos y la configuración del usuario, como el nombre y la contraseña, en sitios web y aplicaciones móviles nativas sin usar una base de datos.

Muchos sitios web de alto tráfico se basan en técnicas complejas como la agrupación de servidores, los equilibradores de carga de DNS, el almacenamiento en caché del lado del cliente y del lado del servidor, las bases de datos distribuidas y los microservicios para optimizar el rendimiento y la disponibilidad. De hecho, el mayor desafío para los sitios web dinámicos es obtener datos de una base de datos y utilizar un lenguaje del lado del servidor como PHP para procesarlos. Sin embargo, el almacenamiento de la base de datos remota debe usarse solo para el contenido esencial del sitio web, como artículos y credenciales de usuario. Las características como las preferencias del usuario se pueden almacenar en el navegador del usuario, de forma similar a las cookies. Del mismo modo, cuando crea una aplicación móvil nativa, puede usar el almacenamiento web HTML5 junto con una base de datos local para aumentar la velocidad de su aplicación. Por lo tanto, como desarrolladores front-end, debemos explorar formas en las que podamos explotar el poder del almacenamiento web HTML5 en nuestras aplicaciones en las primeras etapas de desarrollo.

Formé parte de un equipo que desarrolló un sitio web social a gran escala y utilizamos mucho el almacenamiento web HTML5. Por ejemplo, cuando un usuario inicia sesión, almacenamos la ID de usuario cifrada en una sesión de HTML5 y la usamos para autenticar al usuario en páginas protegidas. También usamos esta función para almacenar todas las notificaciones automáticas nuevas, como mensajes de chat nuevos, mensajes de sitios web y fuentes nuevas, y pasarlas de una página a otra. Cuando un sitio web social recibe mucho tráfico, es posible que la dependencia total del servidor para el equilibrio de carga no funcione, por lo que debe identificar las tareas y los datos que pueden ser manejados por el navegador del usuario en lugar de sus servidores.

antecedentes del proyecto

Un carrito de compras permite al visitante de un sitio web ver páginas de productos y agregar artículos a su carrito. El visitante puede revisar todos sus artículos y actualizar su cesta (por ejemplo, para agregar o quitar artículos). Para lograr esto, el sitio web necesita almacenar los datos del visitante y pasarlos de una página a otra, hasta que el visitante vaya a la página de pago y realice una compra. El almacenamiento de datos se puede realizar a través de un lenguaje del lado del servidor o uno del lado del cliente. Con un lenguaje del lado del servidor, el servidor soporta el peso del almacenamiento de datos, mientras que con un lenguaje del lado del cliente, la computadora del visitante (escritorio, tableta o teléfono inteligente) almacena y procesa los datos. Cada enfoque tiene sus pros y sus contras. En este tutorial, nos centraremos en un enfoque simple del lado del cliente, basado en HTML5 y JavaScript.

Nota : Para poder seguir este tutorial, se requieren conocimientos básicos de HTML5, CSS y JavaScript.

Archivos de proyecto

Haga clic aquí para descargar los archivos fuente del proyecto. También puede ver una demostración en vivo.

Descripción general del almacenamiento web HTML5

El almacenamiento web HTML5 permite que las aplicaciones web almacenen valores localmente en el navegador que pueden sobrevivir a la sesión del navegador, al igual que las cookies. A diferencia de las cookies que deben enviarse con cada solicitud HTTP, los datos de almacenamiento web nunca se transfieren al servidor; por lo tanto, el almacenamiento web supera a las cookies en rendimiento web. Además, las cookies le permiten almacenar solo 4 KB de datos por dominio, mientras que el almacenamiento web permite al menos 5 MB por dominio. El almacenamiento web funciona como una matriz simple, que asigna claves a valores, y tiene dos tipos:

• Almacenamiento de sesión
  Esto almacena datos en una sesión del navegador, donde está disponible hasta que se cierra el navegador o la pestaña del navegador. Las ventanas emergentes abiertas desde la misma ventana pueden ver el almacenamiento de la sesión, al igual que los iframes dentro de la misma ventana. Sin embargo, varias ventanas del mismo origen (URL) no pueden ver el almacenamiento de sesión de las demás.
• Almacenamiento local
  Esto almacena datos en el navegador web sin fecha de vencimiento. Los datos están disponibles para todas las ventanas con el mismo origen (dominio), incluso cuando el navegador o las pestañas del navegador se vuelven a abrir o cerrar.

Ambos tipos de almacenamiento son actualmente compatibles con todos los principales navegadores web. Tenga en cuenta que no puede pasar datos de almacenamiento de un navegador a otro, incluso si ambos navegadores visitan el mismo dominio.

Construya un carrito de compras básico

Para construir nuestro carrito de compras, primero creamos una página HTML con un carrito simple para mostrar artículos y un formulario simple para agregar o editar el carrito. Luego, le agregamos almacenamiento web HTML, seguido de codificación JavaScript. Aunque estamos usando etiquetas de almacenamiento local de HTML5, todos los pasos son idénticos a los del almacenamiento de sesión de HTML5 y se pueden aplicar a las etiquetas de almacenamiento de sesión de HTML5. Por último, repasaremos un poco de código jQuery, como alternativa al código JavaScript, para aquellos interesados ​​en usar jQuery.

Agregue almacenamiento local HTML5 al carrito de compras

Nuestra página HTML es una página básica, con etiquetas para JavaScript externo y CSS a las que se hace referencia en el encabezado.

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

A continuación se muestra el contenido HTML que aparece en el cuerpo de la 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>

Agregar JavaScript al carrito de compras

Crearemos y llamaremos a la función de JavaScript doShowAll() en el evento onload() para verificar la compatibilidad del navegador y crear dinámicamente la tabla que muestra el par nombre-valor de almacenamiento.

 <body onload="doShowAll()">

Alternativamente, puede usar el evento de carga de JavaScript agregando esto al código de JavaScript:

 window.load=doShowAll();

O usa esto para jQuery:

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

En la función CheckBrowser() , nos gustaría verificar si el navegador admite almacenamiento HTML5. Tenga en cuenta que es posible que este paso no sea necesario porque la mayoría de los navegadores web modernos lo admiten.

 /* =====> 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 de doShowAll() , si la función CheckBrowser() evalúa primero la compatibilidad con el navegador, creará dinámicamente la tabla para la lista de compras durante la carga de la página. Puede iterar las claves (nombres de propiedad) de los pares clave-valor almacenados en el almacenamiento local dentro de un bucle de JavaScript, como se muestra a continuación. En función del valor de almacenamiento, este método rellena la tabla de forma dinámica para mostrar el par clave-valor almacenado en el almacenamiento 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'); } }

Nota : Usted o su marco tendrán un método preferido para crear nuevos nodos DOM y manejar eventos. Para mantener las cosas claras y enfocadas, nuestro ejemplo usa .innerHTML y controladores de eventos en línea, aunque normalmente evitaríamos eso en el código de producción.

Sugerencia: si desea utilizar jQuery para enlazar datos, simplemente puede reemplazar document.getElementById('list').innerHTML = list; con $('#list').html()=list; .

Ejecute y pruebe el carrito de compras

En las dos secciones anteriores, agregamos código al encabezado HTML y agregamos HTML al formulario del carrito de compras y al carrito. También creamos una función de JavaScript para verificar la compatibilidad del navegador y completar la cesta con los artículos en el carrito. Al completar los elementos de la cesta, JavaScript obtiene valores del almacenamiento web HTML, en lugar de una base de datos. En esta parte, le mostraremos cómo se insertan los datos en el motor de almacenamiento HTML5. Es decir, usaremos el almacenamiento local de HTML5 junto con JavaScript para insertar nuevos artículos en el carrito de compras, así como para editar un artículo existente en el carrito.

Nota : he agregado secciones de consejos a continuación para mostrar el código jQuery, como alternativa a los de JavaScript.

Crearemos un elemento div HTML separado para capturar la entrada y el envío del usuario. Adjuntaremos la función de JavaScript correspondiente en el evento onClick para los botones.

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

Puede establecer propiedades en el objeto localStorage de forma similar a un objeto JavaScript normal. Este es un ejemplo de cómo podemos establecer la propiedad de almacenamiento local myProperty en el valor myValue :

 localStorage.myProperty="myValue";

Puede eliminar la propiedad de almacenamiento local de esta manera:

 delete localStorage.myProperty;

Alternativamente, puede usar los siguientes métodos para acceder al almacenamiento local:

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

Para guardar el par clave-valor, obtenga el valor del objeto JavaScript correspondiente y llame al método setItem :

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

A continuación se muestra la alternativa de jQuery para la función SaveItem . Primero, agregue una ID a las entradas del formulario:

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

Luego, seleccione las entradas del formulario por ID y obtenga sus valores. Como puede ver a continuación, es mucho más simple que JavaScript:

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

Para actualizar un artículo en el carrito de compras, primero debe verificar si la clave de ese artículo ya existe en el almacenamiento local y luego actualizar su valor, como se muestra a continuación:

 //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(); }

A continuación se muestra la 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 el método removeItem para eliminar un elemento del almacenamiento.

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

Sugerencia: similar a las dos funciones anteriores, puede usar los selectores de jQuery en la función RemoveItem .

Existe otro método para el almacenamiento local que le permite borrar todo el almacenamiento local. Llamamos a la función ClearAll() en el evento onClick del botón “Clear”:

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

Usamos el método clear para borrar el almacenamiento local, como se muestra a continuación:

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

Almacenamiento de sesión

El objeto sessionStorage funciona de la misma manera que localStorage . Puede reemplazar el ejemplo anterior con el objeto sessionStorage para caducar los datos después de una sesión. Una vez que el usuario cierre la ventana del navegador, se borrará el almacenamiento. En resumen, las API para localStorage y sessionStorage son idénticas, lo que le permite utilizar los siguientes métodos:

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

Carros de compras con arreglos y objetos

Debido a que el almacenamiento web HTML5 solo admite almacenamiento de valor de nombre único, debe usar JSON u otro método para convertir sus matrices u objetos en una sola cadena. Es posible que necesite una matriz u objeto si tiene una categoría y subcategorías de artículos, o si tiene un carrito de compras con múltiples datos, como información del cliente, información del artículo, etc. Solo necesita implosionar su matriz o elementos de objeto en una cadena para almacenarlos en el almacenamiento web y luego explotarlos (o dividirlos) nuevamente en una matriz para mostrarlos en otra página. Veamos un ejemplo básico de un carrito de compras que tiene tres conjuntos de información: información del cliente, información del artículo y dirección postal personalizada. Primero, usamos JSON.stringify para convertir el objeto en una cadena. Luego, usamos JSON.parse para revertirlo.

Sugerencia : tenga en cuenta que el nombre clave debe ser único para cada dominio.

 //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);

Resumen

En este tutorial, hemos aprendido cómo crear un carrito de compras paso a paso usando almacenamiento web HTML5 y JavaScript. Hemos visto cómo usar jQuery como alternativa a JavaScript. También hemos discutido funciones JSON como stringify y parse para manejar arreglos y objetos en un carrito de compras. Puede desarrollar este tutorial agregando más funciones, como agregar categorías y subcategorías de productos mientras almacena datos en una matriz multidimensional de JavaScript. Además, puede reemplazar todo el código JavaScript con jQuery.

Hemos visto qué otras cosas pueden lograr los desarrolladores con el almacenamiento web HTML5 y qué otras características pueden agregar a sus sitios web. Por ejemplo, puede usar este tutorial para almacenar preferencias de usuario, contenido favorito, listas de deseos y configuraciones de usuario como nombres y contraseñas en sitios web y aplicaciones móviles nativas, sin usar una base de datos.

Para concluir, aquí hay algunos problemas a tener en cuenta al implementar el almacenamiento web HTML5:

• Algunos usuarios pueden tener configuraciones de privacidad que evitan que el navegador almacene datos.
• Algunos usuarios pueden usar su navegador en modo de incógnito.
• Tenga en cuenta algunos problemas de seguridad, como ataques de suplantación de DNS, ataques entre directorios y compromiso de datos confidenciales.

Lectura relacionada

• "Límites de almacenamiento del navegador y criterios de desalojo", documentos web de MDN, Mozilla
• "Almacenamiento web", HTML Living Standard,
• “Esta semana en HTML 5”, el blog de WHATWG