Création d'un panier d'achat avec le stockage Web HTML5

Avec l'avènement de HTML5, de nombreux sites ont pu remplacer les plugins et les codes JavaScript par des codes HTML simples et plus efficaces tels que l'audio, la vidéo, la géolocalisation, etc. Les balises HTML5 ont rendu le travail des développeurs beaucoup plus facile tout en améliorant le temps de chargement des pages et les performances du site. En particulier, le stockage Web HTML5 a changé la donne car il permet aux navigateurs des utilisateurs de stocker les données des utilisateurs sans utiliser de serveur. Ainsi, la création du stockage Web a permis aux développeurs frontaux d'accomplir davantage sur leur site Web sans connaître ou utiliser le codage ou la base de données côté serveur.

Les sites Web de commerce électronique en ligne utilisent principalement des langages côté serveur tels que PHP pour stocker les données des utilisateurs et les transmettre d'une page à l'autre. En utilisant des frameworks back-end JavaScript tels que Node.js, nous pouvons atteindre le même objectif. Cependant, dans ce didacticiel, nous allons vous montrer étape par étape comment créer un panier d'achat avec HTML5 et quelques codes JavaScript mineurs. D'autres utilisations des techniques de ce didacticiel consisteraient à stocker les préférences de l'utilisateur, le contenu préféré de l'utilisateur, les listes de souhaits et les paramètres utilisateur tels que le nom et le mot de passe sur les sites Web et les applications mobiles natives sans utiliser de base de données.

De nombreux sites Web à fort trafic s'appuient sur des techniques complexes telles que le clustering de serveurs, les équilibreurs de charge DNS, la mise en cache côté client et côté serveur, les bases de données distribuées et les microservices pour optimiser les performances et la disponibilité. En effet, le défi majeur pour les sites Web dynamiques est de récupérer les données d'une base de données et d'utiliser un langage côté serveur tel que PHP pour les traiter. Cependant, le stockage de base de données à distance ne doit être utilisé que pour le contenu essentiel du site Web, tel que les articles et les informations d'identification des utilisateurs. Des fonctionnalités telles que les préférences de l'utilisateur peuvent être stockées dans le navigateur de l'utilisateur, de la même manière que les cookies. De même, lorsque vous créez une application mobile native, vous pouvez utiliser le stockage Web HTML5 conjointement avec une base de données locale pour augmenter la vitesse de votre application. Ainsi, en tant que développeurs front-end, nous devons explorer les moyens d'exploiter la puissance du stockage Web HTML5 dans nos applications dès les premières étapes du développement.

J'ai fait partie d'une équipe développant un site Web social à grande échelle et nous avons beaucoup utilisé le stockage Web HTML5. Par exemple, lorsqu'un utilisateur se connecte, nous stockons l'ID utilisateur haché dans une session HTML5 et l'utilisons pour authentifier l'utilisateur sur les pages protégées. Nous utilisons également cette fonctionnalité pour stocker toutes les nouvelles notifications push, telles que les nouveaux messages de chat, les messages de site Web et les nouveaux flux, et les transmettre d'une page à l'autre. Lorsqu'un site Web social reçoit un trafic élevé, la dépendance totale au serveur pour l'équilibrage de charge peut ne pas fonctionner, vous devez donc identifier les tâches et les données qui peuvent être gérées par le navigateur de l'utilisateur au lieu de vos serveurs.

Contexte du projet

Un panier d'achat permet au visiteur d'un site Web de consulter les pages de produits et d'ajouter des articles à son panier. Le visiteur peut consulter l'ensemble de ses articles et mettre à jour son panier (par exemple pour ajouter ou supprimer des articles). Pour ce faire, le site Web doit stocker les données du visiteur et les transmettre d'une page à l'autre, jusqu'à ce que le visiteur se rende à la page de paiement et effectue un achat. Le stockage des données peut se faire via un langage côté serveur ou côté client. Avec un langage côté serveur, le serveur supporte le poids du stockage des données, alors qu'avec un langage côté client, l'ordinateur du visiteur (desktop, tablette ou smartphone) stocke et traite les données. Chaque approche a ses avantages et ses inconvénients. Dans ce didacticiel, nous nous concentrerons sur une approche simple côté client, basée sur HTML5 et JavaScript.

Note : Afin de pouvoir suivre ce tutoriel, des connaissances de base en HTML5, CSS et JavaScript sont requises.

Fichiers de projet

Cliquez ici pour télécharger les fichiers source du projet. Vous pouvez également voir une démo en direct.

Présentation du stockage Web HTML5

Le stockage Web HTML5 permet aux applications Web de stocker localement des valeurs dans le navigateur qui peuvent survivre à la session du navigateur, tout comme les cookies. Contrairement aux cookies qui doivent être envoyés avec chaque requête HTTP, les données de stockage Web ne sont jamais transférées au serveur ; ainsi, le stockage Web surpasse les cookies en termes de performances Web. De plus, les cookies vous permettent de stocker seulement 4 Ko de données par domaine, alors que le stockage Web autorise au moins 5 Mo par domaine. Le stockage Web fonctionne comme un simple tableau, mappant les clés aux valeurs, et ils ont deux types :

• Stockage des sessions
  Cela stocke les données dans une session de navigateur, où elles deviennent disponibles jusqu'à ce que le navigateur ou l'onglet du navigateur soit fermé. Les fenêtres contextuelles ouvertes à partir de la même fenêtre peuvent voir le stockage de session, tout comme les iframes à l'intérieur de la même fenêtre. Cependant, plusieurs fenêtres de la même origine (URL) ne peuvent pas voir le stockage de session de l'autre.
• Stockage local
  Cela stocke les données dans le navigateur Web sans date d'expiration. Les données sont disponibles pour toutes les fenêtres avec la même origine (domaine), même lorsque le navigateur ou les onglets du navigateur sont rouverts ou fermés.

Les deux types de stockage sont actuellement pris en charge dans tous les principaux navigateurs Web. N'oubliez pas que vous ne pouvez pas transmettre de données de stockage d'un navigateur à un autre, même si les deux navigateurs visitent le même domaine.

Construire un panier de base

Pour construire notre panier, nous créons d'abord une page HTML avec un simple panier pour afficher les articles, et un simple formulaire pour ajouter ou modifier le panier. Ensuite, nous y ajoutons un stockage Web HTML, suivi d'un codage JavaScript. Bien que nous utilisions des balises de stockage local HTML5, toutes les étapes sont identiques à celles du stockage de session HTML5 et peuvent être appliquées aux balises de stockage de session HTML5. Enfin, nous passerons en revue du code jQuery, comme alternative au code JavaScript, pour ceux qui souhaitent utiliser jQuery.

Ajouter le stockage local HTML5 au panier

Notre page HTML est une page de base, avec des balises pour JavaScript externe et CSS référencées dans l'en-tête.

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

Vous trouverez ci-dessous le contenu HTML qui apparaît dans le corps de la page :

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

Ajout de JavaScript au panier

Nous allons créer et appeler la fonction JavaScript doShowAll() dans l' onload() pour vérifier la prise en charge du navigateur et créer dynamiquement la table qui affiche la paire nom-valeur de stockage.

 <body onload="doShowAll()">

Vous pouvez également utiliser l'événement JavaScript onload en ajoutant ceci au code JavaScript :

 window.load=doShowAll();

Ou utilisez ceci pour jQuery :

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

Dans la fonction CheckBrowser() , nous voudrions vérifier si le navigateur prend en charge le stockage HTML5. Notez que cette étape peut ne pas être nécessaire car la plupart des navigateurs Web modernes la prennent en charge.

 /* =====> 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; } }

Dans doShowAll() , si la fonction CheckBrowser() évalue d'abord la prise en charge du navigateur, elle créera dynamiquement le tableau de la liste de courses lors du chargement de la page. Vous pouvez itérer les clés (noms de propriété) des paires clé-valeur stockées dans le stockage local à l'intérieur d'une boucle JavaScript, comme indiqué ci-dessous. En fonction de la valeur de stockage, cette méthode remplit la table de manière dynamique pour afficher la paire clé-valeur stockée dans le stockage 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'); } }

Remarque : vous ou votre framework aurez une méthode préférée pour créer de nouveaux nœuds DOM et gérer les événements. Pour que les choses restent claires et ciblées, notre exemple utilise .innerHTML et des gestionnaires d'événements en ligne, même si nous évitons normalement cela dans le code de production.

Astuce : Si vous souhaitez utiliser jQuery pour lier des données, vous pouvez simplement remplacer document.getElementById('list').innerHTML = list; avec $('#list').html()=list; .

Exécutez et testez le panier

Dans les deux sections précédentes, nous avons ajouté du code à l'en-tête HTML, et nous avons ajouté du code HTML au formulaire de panier et au panier. Nous avons également créé une fonction JavaScript pour vérifier la prise en charge du navigateur et remplir le panier avec les articles du panier. En remplissant les éléments du panier, le JavaScript récupère les valeurs du stockage Web HTML, au lieu d'une base de données. Dans cette partie, nous allons vous montrer comment les données sont insérées dans le moteur de stockage HTML5. Autrement dit, nous utiliserons le stockage local HTML5 conjointement avec JavaScript pour insérer de nouveaux articles dans le panier, ainsi que pour modifier un article existant dans le panier.

Note : J'ai ajouté des sections d'astuces ci-dessous pour afficher le code jQuery, comme alternative à ceux en JavaScript.

Nous allons créer un élément HTML div séparé pour capturer les entrées et les soumissions des utilisateurs. Nous allons attacher la fonction JavaScript correspondante dans l'événement onClick pour les boutons.

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

Vous pouvez définir des propriétés sur l'objet localStorage de la même manière qu'un objet JavaScript normal. Voici un exemple de la façon dont nous pouvons définir la propriété de stockage local myProperty sur la valeur myValue :

 localStorage.myProperty="myValue";

Vous pouvez supprimer la propriété de stockage local comme ceci :

 delete localStorage.myProperty;

Vous pouvez également utiliser les méthodes suivantes pour accéder au stockage local :

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

Pour enregistrer la paire clé-valeur, récupérez la valeur de l'objet JavaScript correspondant et appelez la méthode setItem :

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

Vous trouverez ci-dessous l'alternative jQuery pour la fonction SaveItem . Tout d'abord, ajoutez un ID aux entrées du formulaire :

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

Ensuite, sélectionnez les entrées de formulaire par ID et obtenez leurs valeurs. Comme vous pouvez le voir ci-dessous, c'est beaucoup plus simple que JavaScript :

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

Pour mettre à jour un article dans le panier, vous devez d'abord vérifier si la clé de cet article existe déjà dans le stockage local, puis mettre à jour sa valeur, comme indiqué ci-dessous :

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

Ci-dessous montre l'alternative 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(); }

Nous utiliserons la méthode removeItem pour supprimer un élément du stockage.

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

Conseil : Semblable aux deux fonctions précédentes, vous pouvez utiliser des sélecteurs jQuery dans la fonction RemoveItem .

Il existe une autre méthode de stockage local qui vous permet d'effacer tout le stockage local. Nous appelons la fonction ClearAll() dans l'événement onClick du bouton "Clear":

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

Nous utilisons la méthode clear pour effacer le stockage local, comme indiqué ci-dessous :

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

Stockage des sessions

L'objet sessionStorage fonctionne de la même manière que localStorage . Vous pouvez remplacer l'exemple ci-dessus par l'objet sessionStorage pour faire expirer les données après une session. Une fois que l'utilisateur ferme la fenêtre du navigateur, le stockage sera effacé. En bref, les API pour localStorage et sessionStorage sont identiques, vous permettant d'utiliser les méthodes suivantes :

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

Caddies avec des tableaux et des objets

Étant donné que le stockage Web HTML5 ne prend en charge que le stockage nom-valeur unique, vous devez utiliser JSON ou une autre méthode pour convertir vos tableaux ou objets en une seule chaîne. Vous pourriez avoir besoin d'un tableau ou d'un objet si vous avez une catégorie et des sous-catégories d'articles, ou si vous avez un panier avec plusieurs données, comme des informations sur le client, des informations sur l'article, etc. Il vous suffit d'imploser votre tableau ou vos objets dans une chaîne pour les stocker dans le stockage Web, puis les décomposer (ou les diviser) en un tableau pour les afficher sur une autre page. Passons en revue un exemple de base d'un panier d'achat contenant trois ensembles d'informations : informations sur le client, informations sur l'article et adresse postale personnalisée. Tout d'abord, nous utilisons JSON.stringify pour convertir l'objet en chaîne. Ensuite, nous utilisons JSON.parse pour l'inverser.

Astuce : Gardez à l'esprit que le nom de la clé doit être unique pour chaque domaine.

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

Sommaire

Dans ce didacticiel, nous avons appris à créer un panier étape par étape à l'aide du stockage Web HTML5 et de JavaScript. Nous avons vu comment utiliser jQuery comme alternative à JavaScript. Nous avons également discuté des fonctions JSON telles que stringify et parse pour gérer les tableaux et les objets dans un panier. Vous pouvez vous appuyer sur ce didacticiel en ajoutant plus de fonctionnalités, comme l'ajout de catégories et de sous-catégories de produits tout en stockant les données dans un tableau multidimensionnel JavaScript. De plus, vous pouvez remplacer tout le code JavaScript par jQuery.

Nous avons vu ce que les développeurs peuvent accomplir d'autre avec le stockage Web HTML5 et quelles autres fonctionnalités ils peuvent ajouter à leurs sites Web. Par exemple, vous pouvez utiliser ce didacticiel pour stocker les préférences utilisateur, le contenu favori, les listes de souhaits et les paramètres utilisateur tels que les noms et les mots de passe sur les sites Web et les applications mobiles natives, sans utiliser de base de données.

Pour conclure, voici quelques problèmes à prendre en compte lors de la mise en œuvre du stockage Web HTML5 :

• Certains utilisateurs peuvent avoir des paramètres de confidentialité qui empêchent le navigateur de stocker des données.
• Certains utilisateurs peuvent utiliser leur navigateur en mode incognito.
• Soyez conscient de quelques problèmes de sécurité, comme les attaques d'usurpation DNS, les attaques inter-répertoires et la compromission des données sensibles.

Lecture connexe

• "Limites de stockage du navigateur et critères d'éviction", documentation Web MDN, Mozilla
• "Stockage Web", HTML Living Standard,
• "Cette semaine en HTML 5", le blog WHATWG