Fermer

août 26, 2019

Créer un panier avec le stockage Web HTML5


Ce tutoriel vous montrera comment exploiter tout le potentiel du stockage Web HTML5 en créant un panier d'achat étape par étape. Ce que vous apprendrez dans ce didacticiel peut facilement être appliqué à d'autres fonctionnalités du site ne nécessitant pas de stockage dans la base de données, telles que les préférences de l'utilisateur, son contenu favori, sa liste de souhaits, ses paramètres tels que nom d'utilisateur et mot de passe, et bien plus encore.

, de nombreux sites ont pu remplacer le plug-in et les codes JavaScript par des codes HTML simples et plus efficaces, tels que l'audio, la vidéo, la géolocalisation, etc. En particulier, le stockage Web HTML5 a changé la donne, car il permet aux navigateurs des utilisateurs de stocker leurs données sans utiliser de serveur. Ainsi, la création de stockage Web a permis aux développeurs front-end d’accomplir davantage sur leur site Web sans savoir, ni utiliser de code ou de base de données côté serveur.

Les sites de commerce électronique en ligne utilisent principalement des langages côté serveur tels que PHP pour stocker les utilisateurs ". données et les transmettre d’une page à une autre. En utilisant des infrastructures dorsales JavaScript telles que Node.js, nous pouvons atteindre le même objectif. Cependant, dans ce tutoriel, nous allons vous montrer, étape par étape, comment construire un panier avec HTML5 et du code JavaScript mineur. Les autres techniques utilisées dans ce didacticiel consisteraient à stocker les préférences de l'utilisateur, son contenu favori, ses listes de souhaits et ses paramètres 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 très fréquentés dépendent sur des techniques complexes telles que la mise en cluster 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 principal défi des sites Web dynamiques consiste à extraire des données d'une base de données et à utiliser un langage côté serveur, tel que PHP, pour les traiter. Toutefois, le stockage de base de données à distance ne doit être utilisé que pour le contenu essentiel de sites Web, tels que les articles et les informations d'identification de l'utilisateur. Des fonctionnalités telles que les préférences de l'utilisateur peuvent être stockées dans le navigateur de l'utilisateur, à l'instar des cookies. De même, lorsque vous créez une application mobile native, vous pouvez utiliser le stockage Web HTML5 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 aux premiers stades de développement.

Je fais partie d'une équipe qui développe une solution à grande échelle. site Web social, et nous avons beaucoup utilisé le stockage Web HTML5. Par exemple, lorsqu'un utilisateur se connecte, nous stockons l'ID d'utilisateur haché dans une session HTML5 et l'utilisons pour l'authentifier sur des pages protégées. Nous utilisons également cette fonctionnalité pour stocker toutes les nouvelles notifications push (telles que les nouveaux messages de discussion, les messages de site Web et les nouveaux flux), et les transmettre d'une page à une autre. Lorsqu'un site Web social génère un trafic important, la dépendance totale du serveur pour l'équilibrage de la charge peut ne pas fonctionner, vous devez donc identifier les tâches et les données pouvant être gérées par le navigateur de l'utilisateur plutôt que par vos serveurs.

Contexte du projet

A Le panier permet aux visiteurs d'un site Web de visualiser les pages de produits et d'ajouter des articles à leur panier. Le visiteur peut revoir tous ses articles et mettre à jour son panier (pour ajouter ou supprimer des articles, par exemple). 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 accède à la page de paiement et effectue un achat. Le stockage des données peut être effectué via un langage côté serveur ou un langage côté client. Avec une langue côté serveur, le serveur supporte le poids du stockage de données, tandis qu'avec une langue côté client, l’ordinateur du visiteur (ordinateur de bureau, 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 client simple, basée sur HTML5 et JavaScript.

Note : Pour pouvoir suivre ce didacticiel, des connaissances de base en HTML5 , CSS et JavaScript requis.

Fichiers du projet

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

Présentation du stockage Web HTML5

Le stockage Web HTML5 permet aux applications Web de stocker localement dans le navigateur des valeurs 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 sur le serveur. ainsi, le stockage Web surpasse les cookies en performances Web. De plus, les cookies ne vous permettent de stocker que 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 sur des valeurs et se déclinant en deux types:

  • Stockage de session
    Il stocke les données dans une session du navigateur, où elles deviennent disponibles jusqu'à la fermeture du navigateur ou de l'onglet du navigateur. Les fenêtres contextuelles ouvertes à partir de la même fenêtre peuvent voir le stockage de session, de même que les iframes dans la même fenêtre. Cependant, plusieurs fenêtres de la même origine (URL) ne peuvent pas voir la mémoire de session de chacune.
  • Stockage local
    Ceci stocke les données dans le navigateur Web sans date d'expiration. Les données sont disponibles pour toutes les fenêtres ayant 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 les principaux navigateurs Web. N'oubliez pas que vous ne pouvez pas transmettre les données de stockage d'un navigateur à un autre, même si les deux navigateurs visitent le même domaine.

Création d'un panier d'achat simple

Pour créer notre panier d'achat, nous créons d'abord une page HTML avec un panier simple pour afficher les articles, et un formulaire simple pour ajouter ou modifier le panier. Ensuite, nous y ajoutons du stockage Web HTML, suivi du 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 allons passer au code jQuery, une alternative au code JavaScript, pour ceux qui sont intéressés par l’utilisation de jQuery.

Ajouter le stockage local HTML5 au panier

Notre page HTML est une page simple, avec des tags pour external JavaScript et CSS référencés dans l'en-tête.




 Projet de stockage local HTML5 







  

Ci-dessous le contenu HTML du corps de la page:

Article: Quantité:

Liste d'achats

Ajout de JavaScript dans le panier

Nous allons créer et appeler la fonction JavaScript doShowAll () dans l'événement onload () pour vérifier le support du navigateur et le dynamiser. créez la table qui affiche la paire nom-valeur de stockage.


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

 window.load = doShowAll ();

Ou utilisez ceci pour jQuery:

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

La fonction CheckBrowser () permet de 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 actuels la prennent en charge.

 / *
=====> Vérification de la prise en charge du navigateur.
 // Cette étape n'est peut-être pas nécessaire car la plupart des navigateurs modernes prennent en charge HTML5.
 * /
 // La fonction ci-dessous peut être redondante.
fonction CheckBrowser () {
    if ('localStorage' dans la fenêtre && window ['localStorage']! == null) {
        // Nous pouvons utiliser l'objet localStorage pour stocker des données.
        retourne vrai;
    } autre {
            retourne faux;
    }
}

Dans doShowAll () si la fonction CheckBrowser () évalue d'abord la prise en charge du navigateur, elle créera dynamiquement le tableau de la liste d'achats lors du chargement de la page. Vous pouvez parcourir les clés (noms de propriétés) 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 la mémoire de stockage locale.

 // Remplit de manière dynamique la table avec des éléments de la liste de courses.
// L'étape ci-dessous peut également être réalisée via PHP et AJAX.
fonction doShowAll () {
    if (CheckBrowser ()) {
        var clé = "";
        var list = " Poste  Valeur   n"
        var i = 0;
        // Pour une fonctionnalité plus avancée, vous pouvez définir un nombre maximal d'éléments maximum dans le panier.
        pour (i = 0; i <= localStorage.length-1; i ++) {
            key = localStorage.key (i);
            list + = "" + touche + "  n "
                    + localStorage.getItem (clé) + "  n";
        }
        // Si aucun article n'existe dans le panier.
        if (liste == " Poste  Valeur   n") {
            list + = "  vide   n  vide    n";
        }
        // Lier les données à la table HTML.
        // Vous pouvez aussi utiliser jQuery.
        document.getElementById ('list'). innerHTML = list;
    } autre {
        alert ("Impossible d'enregistrer la liste d'achats car votre navigateur ne prend pas en charge HTML 5");
    }
}

Note : Vous ou votre structure aurez une méthode privilégiée pour créer de nouveaux nœuds DOM. Pour que tout soit clair et précis, notre exemple utilise .innerHTML même si nous éviterions normalement cela dans le code de production.

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

Exécuter et tester le panier

Dans les deux sections précédentes, nous avons ajouté du code à l’en-tête HTML et du code HTML au formulaire et au panier du panier. Nous avons également créé une fonction JavaScript pour vérifier la prise en charge du navigateur et pour remplir le panier avec les articles du panier. En remplissant les éléments du panier, JavaScript extrait 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. En d'autres termes, nous utiliserons le stockage local HTML5 en conjonction avec JavaScript pour insérer de nouveaux articles dans le panier et modifier un article existant dans le panier.

Note : I ' Nous avons ajouté des astuces ci-dessous pour afficher le code jQuery, en guise d'alternative à celles en JavaScript.

Nous allons créer un élément HTML div distinct pour capturer les entrées et la soumission de l'utilisateur. Nous allons associer la fonction JavaScript correspondante à l’événement onClick pour les boutons.

 


Vous pouvez définir des propriétés sur l'objet localStorage similaire à 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 deValue :

 localStorage.myProperty = "myValue";

Vous pouvez supprimer une propriété de stockage local comme suit:

 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, obtenez 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 (nom, données);
    doShowAll ();
    
}

Voici l'alternative jQuery pour la fonction SaveItem . Premièrement, ajoutez un identifiant aux entrées de formulaire:

   Article: 
 Quantité:   

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

 function SaveItem () {
    nom var = $ ("# nom"). val ();
    var data = $ ("# data"). val ();
    localStorage.setItem (nom, données);
    doShowAll ();
}

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

 // Modifier une valeur-clé existante dans HTML5 espace de rangement.
function ModifyItem () {
    var name1 = document.forms.ShoppingList.name.value;
    var data1 = document.forms.ShoppingList.data.value;
    // vérifie si name1 existe déjà
    
// Vérifie si la clé existe.
            if (localStorage.getItem (name1)! = null)
            {
              //mettre à jour
              localStorage.setItem (name1, data1);
              document.forms.ShoppingList.data.value = localStorage.getItem (name1);
            }
        
    
    doShowAll ();
}

L’alternative jQuery est illustrée ci-dessous.

 function ModifyItem () {
    var nom1 = $ ("# nom"). val ();
    var data1 = $ ("# data"). val ();
    // Vérifie si le nom existe déjà.
// Vérifie si la clé existe.
         if (localStorage.getItem (name1)! = null)
         {
           //mettre à jour
           localStorage.setItem (name1, data1);
           var new_info = localStorage.getItem (name1);
           $ ("# data"). val (new_info);
         }
    
    doShowAll ();
}

Nous allons utiliser la méthode removeItem pour supprimer un élément de son 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 les sélecteurs jQuery dans la fonction RemoveItem .

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

 .

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

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

Stockage de session

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 résumé, les API pour localStorage et sessionStorage sont identiques, ce qui vous permet d'utiliser les méthodes suivantes:

  • setItem (clé, valeur)
  • getItem (clé)
  • ] removeItem (key)
  • clear ()
  • key (index)
  • length

Chariots avec tableaux et objets

Le stockage Web HTML5 ne prenant en charge que le stockage à nom unique, vous devez utiliser JSON ou une autre méthode pour convertir vos tableaux ou objets en une seule chaîne. Vous aurez peut-être besoin d'un tableau ou d'un objet si vous avez une catégorie et des sous-catégories d'éléments, ou si vous avez un panier d'achat contenant plusieurs données, telles que des informations sur le client, des informations sur les articles, 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 scinder) en un tableau pour les afficher sur une autre page. Examinons un exemple de base d’un panier comportant trois ensembles d’informations: informations sur le client, informations sur le produit 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.

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

 // Client Info
// Vous pouvez utiliser un tableau en plus d'un objet.
var obj1 = {prénom: "John", nom de famille: "thomson"};
var cust = JSON.stringify (obj1);

// Informations postales
var obj2 = {état: "VA", ville: "Arlington"};
var mail = JSON.stringify (obj2);

// Information sur l'article
var obj3 = {item: "lait", quantité: 2};
var basket = JSON.stringify (obj3);

// Ensuite, insérez trois chaînes dans la valeur-clé du stockage HTML5.

// Utilisez la fonction d'analyse JSON ci-dessous pour reconvertir la chaîne en objet ou en tableau.
var New_cust = JSON.parse (cust);

Résumé

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

Nous avons vu ce que les développeurs peuvent accomplir d'autre avec le stockage Web HTML5 et les autres fonctionnalités qu'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 à résoudre. Pensez 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 de navigation privée. attaques d'usurpation d'identité, attaques inter-répertoires et compromission de données sensibles.
 Un éditorial éclatant (dm, il)




Source link