Exemple d'utilisation du stockage de session pour le TP5

Voici un exemple complet d'utilisation du sessionStorage qui peut être réutilisé pour le TP5.

Le produit

Voici un produit offert sur le site web :

• L'utilisateur indique la quantité voulue;
• choisi la couleur;
• ajoute ensuite à son panier.

Ajout au panier

Dans le script :

• si la quantité est supérieure à 0, on conserve les choix

  • conserver la quantité
  • conserver la couleur

Javascript :

function ajouterFactureChapeau()
{
    //trouver le formulaire
    let formulaire = document.getElementById("formChapeau");
    //si le champ avec le name=qteChapeau a une valeur >0
    if(formulaire.qteChapeau.value >0)
    {
        //Conserver la quantité et la couleur
        sessionStorage.setItem("qteChapeau", formulaire.qteChapeau.value);
        sessionStorage.setItem("couleurChapeau", formulaire.couleurChapeau.value);
    }
}

Création du panier

Sur la page du panier, une zone indique que le panier est vide par défaut.

Lorsque des articles sont ajoutés au panier, on :

1. Modifie le titre - le panier n'est plus vide

   document.getElementById("titrePanierVide").innerText = "Votre panier";

2. Crée et ajoute les balises dans la page

   //Créer l'image du produit
   let imgProduit = document.createElement("img");
   imgProduit.setAttribute("src", "img/hat1.jpg");
   imgProduit.setAttribute("class", "img-fluid");
   imgProduit.setAttribute("alt", "Chapeau 1");
   //afficher l'image dans la page
   document.getElementById("panier").appendChild(imgProduit);
   
   //Créer le titre du produit
   let titreProduit = document.createElement("h2");
   titreProduit.innerText = "Style #1";
   //Afficher le titre
   document.getElementById("panier").appendChild(titreProduit);
   
   //Lire la quantité et la couleur dans le stockage
   let quantite = sessionStorage.getItem("qteProduit");
   let couleur = sessionStorage.getItem("couleurProduit");
   
   //Afficher la quantité et la couleur choisie
   let descProduit = document.createElement("p");
   descProduit.innerText = `Qté : ${quantite} \n Couleur : ${couleur} `;
   document.getElementById("panier").appendChild(descProduit);
   

Résultat :

---

⚠️ Pour la mise en page en colonnes, on doit aussi créer des balises div avec les classes row et col. Ensuite on ajoute les informations du produit dans les bonnes colonnes et non directement dans la page.

Exemple :

/*Créer une rangée de grille*/
let divRangee = document.createElement("div");
divRangee.setAttribute("class", "row");
divRangee.setAttribute("id", "divProduit");

/*Création des colonnes*/
let divColUn = document.createElement("div");
divColUn.setAttribute("class", "col");
let divColDeux = document.createElement("div");
divColDeux.setAttribute("class", "col");
let divColTrois = document.createElement("div");
divColTrois.setAttribute("class", "col");

/*Ajout des informations de produit dans les colonnes*/
divColUn.appendChild(imgProduit);
divColDeux.appendChild(titreProduit)
divColTrois.appendChild(descProduit)

/*Ajouter la grille dans la page*/
divRangee.appendChild(divColUn);
divRangee.appendChild(divColDeux);
divRangee.appendChild(divColTrois);
document.getElementById("panier").appendChild(divRangee);