Stocker des données avec sessionStorage en JavaScript

❓ Qu'est-ce que le sessionStorage ?

Le sessionStorage est une API JavaScript similaire au localStorage, qui permet de stocker des données temporairement dans le navigateur.

La principale différence est la durée de vie : les données dans le sessionStorage sont supprimées automatiquement dès que l’onglet du navigateur est fermé.

🎛️ Caractéristiques principales

• Stockage sous forme clé/valeur
• Données valides uniquement pendant la session
• Taille maximale ~5 Mo
• Accessible uniquement depuis le même onglet et le même domaine

💡 Syntaxe de base

Ajouter une donnée

sessionStorage.setItem("theme", "sombre");

Lire une donnée

const theme = sessionStorage.getItem("theme");
console.log(theme); // "sombre"

Supprimer une clé

sessionStorage.removeItem("theme");

Vider tout le stockage de session

sessionStorage.clear();

💾 Stocker des objets (via JSON)

Comme pour localStorage, les objets doivent être transformés en chaînes avec JSON.stringify.

const user = {
  nom: "Camille",
  statut: "connecté"
};

sessionStorage.setItem("user", JSON.stringify(user));

const retrieved = JSON.parse(sessionStorage.getItem("user"));
console.log(retrieved.nom); // "Camille"

📂 Visualiser et modifier les données

Tu peux consulter et éditer les données via les outils développeur de ton navigateur :

1. Appuie sur F12 ou clic droit > Inspecter
2. Onglet Application (ou "Stockage")
3. Sélectionne Session Storage puis ton domaine

Tu peux voir, éditer ou supprimer les paires clé/valeur en direct.

📊 Différences localStorage vs sessionStorage

Caractéristique	localStorage	sessionStorage
Durée de vie	Permanente	Temporaire (fermeture onglet)
Partagé entre onglets	Oui	Non
Capacité	~5 Mo	~5 Mo
API	Identique (setItem, getItem, etc.)

🧠 À retenir

Utilise sessionStorage quand tu veux stocker des données temporairement et les effacer à la fermeture de l’onglet, par exemple :

• Statut de connexion temporaire
• Données de formulaire non soumises
• Navigation en cours dans une web app