Exemples simples d'utilisation de sessionStorage

Voici 3 exemples pour apprendre à utiliser le sessionStorage en JavaScript.

---

1. Sauvegarder le nom entré dans un formulaire

HTML

<input id="nom" placeholder="Ton nom">
<button onclick="sauverNom()">Sauvegarder</button>

Javascript

function sauverNom() {
    //Lire le champ
    let valeur = document.getElementById("nom").value;
    //conserver dans le stockage
    sessionStorage.setItem("nomUtilisateur", valeur);
}

---

2. Conserver le nombre de clics sur un bouton

HTML

<button onclick="compter()">Clique-moi</button>

Javascript

function compter() {
    //Si le compteur existe, on ajoute 1 à la valeur contenue
    if(sessionStorage.getItem("clics") != null)
    { 
        let c = sessionStorage.getItem("clics");
        c = Number(c) + 1;
        sessionStorage.setItem("clics", c);
    }
    else {
        //Sinon on ajoute le compteur avec la valeur 1
        sessionStorage.setItem("clics", 1);
    }
}

---

3. Afficher sur une page les informations stockées

//Lire les informations du stockage
let nomClient = sessionStorage.getItem("nomClient");
let ageClient = sessionStorage.getItem("ageClient");

// Afficher les informations
let zoneAffichage = document.getElementById("divAffichage");
let paragraphe = document.createElement("p");

paragraphe.innerText = `Bonjour ${nomClient}! Votre âge actuel indiqué est : ${ageClient} ans.`;

zoneAffichage.appendChild(paragraphe);

---