Session Storage HTML5

Quand vous avez besoin de garder des données le temps d'un parcours utilisateur — un formulaire en plusieurs étapes, un panier temporaire, un état de navigation — sessionStorage est le bon outil. Contrairement à localStorage, il ne laisse aucune trace une fois l'onglet fermé. Pas besoin de gérer une expiration manuellement : le navigateur s'en charge.

Autre particularité utile : chaque onglet a son propre sessionStorage, isolé des autres. Deux onglets ouverts sur le même site ne partagent pas leurs données de session. C'est un comportement voulu, qui protège la cohérence des données dans des contextes multi-onglets.

Syntaxe de base

L'API sessionStorage est identique à celle de localStorage : mêmes méthodes, même logique. Seule la durée de vie change :

Exemple :   📋 Copier le code

// Stocker une valeur
sessionStorage.setItem('etape', '2');

// Lire une valeur
const etape = sessionStorage.getItem('etape');
console.log(etape); // "2"

// Supprimer une clé
sessionStorage.removeItem('etape');

// Vider tout le sessionStorage de l'onglet
sessionStorage.clear();

Stocker des objets avec JSON

Comme localStorage, sessionStorage ne stocke que du texte. Pour sauvegarder un objet, la conversion JSON est indispensable :

Exemple :   📋 Copier le code

// Données du formulaire à conserver entre les étapes
const etape1 = {
  prenom: 'Karim',
  email: 'karim@exemple.fr'
};

// Sérialiser avant de stocker
sessionStorage.setItem('etape1', JSON.stringify(etape1));

// Récupérer à l'étape suivante
const data = sessionStorage.getItem('etape1');
const formulaire = JSON.parse(data);

console.log(formulaire.prenom); // "Karim"

Exemple pratique : formulaire en plusieurs étapes

Le cas d'usage classique de sessionStorage est le formulaire multi-étapes. On sauvegarde les données de chaque étape au fur et à mesure, puis on les consolide à la soumission finale. Si l'utilisateur ferme l'onglet sans terminer, aucune donnée incomplète ne persiste :

Exemple :   📋 Copier le code

// Étape 1 — informations personnelles
function sauvegarderEtape1() {
  const donnees = {
    prenom: document.getElementById('prenom').value,
    nom: document.getElementById('nom').value
  };
  sessionStorage.setItem('etape1', JSON.stringify(donnees));
}

// Étape 2 — coordonnées
function sauvegarderEtape2() {
  const donnees = {
    email: document.getElementById('email').value,
    telephone: document.getElementById('telephone').value
  };
  sessionStorage.setItem('etape2', JSON.stringify(donnees));
}

// Soumission finale — assembler toutes les étapes
function soumettre() {
  const etape1 = JSON.parse(sessionStorage.getItem('etape1'));
  const etape2 = JSON.parse(sessionStorage.getItem('etape2'));

  const dossierComplet = { ...etape1, ...etape2 };
  console.log('Données à envoyer :', dossierComplet);

  // Nettoyage après envoi
  sessionStorage.clear();
}

Pré-remplir un formulaire si la session est active

Si l'utilisateur recharge la page sans fermer l'onglet, la session est toujours active. On peut donc récupérer les données saisies et remplir à nouveau le formulaire automatiquement :

Exemple :   📋 Copier le code

// Restaurer les champs au chargement de la page
window.addEventListener('load', () => {
  const data = sessionStorage.getItem('etape1');
  if (!data) return;

  const donnees = JSON.parse(data);
  document.getElementById('prenom').value = donnees.prenom || '';
  document.getElementById('nom').value = donnees.nom || '';
});

// Sauvegarder à chaque modification d'un champ
document.getElementById('prenom').addEventListener('input', sauvegarderEtape1);
document.getElementById('nom').addEventListener('input', sauvegarderEtape1);

Isolation entre onglets

C'est la différence la plus importante avec localStorage : deux onglets ouverts sur la même page ne partagent pas leur sessionStorage. Voici une démonstration de ce comportement :

Exemple :   📋 Copier le code

// Dans l'onglet A
sessionStorage.setItem('panier', 'produit-42');

// Dans l'onglet B (même URL, même domaine)
sessionStorage.getItem('panier'); // retourne null — les onglets sont isolés

// localStorage, lui, est partagé entre tous les onglets
localStorage.setItem('panier', 'produit-42');
// Lisible depuis n'importe quel onglet du même domaine

Quand utiliser sessionStorage plutôt que localStorage ?

La règle est simple : utilisez sessionStorage chaque fois que les données n'ont de sens que le temps d'un parcours. Voici les cas typiques :

• Formulaires multi-étapes : les données intermédiaires ne doivent pas persister.
• État de navigation : position de scroll, onglet actif, filtre sélectionné.
• Données sensibles temporaires : un code de validation reçu par SMS, valide le temps de la session.
• Contexte d'une tâche unique : identifiant d'une commande en cours de finalisation.

Pour tout ce qui doit survivre à la fermeture du navigateur (préférences, historique, cache applicatif), préférez localStorage ou IndexedDB.

Par carabde | Mis à jour le 17 avril 2026