Un formulaire en quatre étapes, un filtre de recherche, une position de lecture : autant de données qui comptent le temps d'une visite et deviennent gênantes le lendemain.
Le navigateur offre pour ce cas un espace qui a la même interface que le stockage permanent, mais une espérance de vie différente.
Définition
sessionStorage est un espace clé-valeur attaché à une origine et à un onglet. Les données survivent aux rechargements et aux navigations dans le site, et disparaissent à la fermeture de l'onglet.
sessionStorage.setItem("etape", "3");
sessionStorage.setItem("brouillon", JSON.stringify({ nom: "Camille" }));
console.log(sessionStorage.getItem("etape")); // "3"
console.log(sessionStorage.length); // 2
sessionStorage.removeItem("brouillon");Les méthodes sont exactement celles de localStorage : setItem, getItem, removeItem, clear, plus length et key. Les valeurs y sont également des chaînes de caractères, et un objet passe donc par JSON.
Ce qui conserve et ce qui vide
La durée de vie ne suit pas l'intuition. Le tableau la résume sur deux colonnes : l'action du visiteur, et ce qu'il reste ensuite.
| Action | Contenu de l'espace |
|---|---|
| Rechargement de la page | Conservé |
| Navigation dans le même site | Conservé |
| Retour arrière du navigateur | Conservé |
| Duplication de l'onglet | Copié dans le nouvel onglet |
| Nouvel onglet ouvert à la main | Vide |
| Fermeture de l'onglet | Effacé |
La quatrième ligne surprend souvent : dupliquer un onglet ne partage pas l'espace, il en fabrique une copie indépendante qui évoluera de son côté.
Le cas d'usage type
Sauvegarder l'avancement d'un formulaire long protège contre le rechargement accidentel, sans laisser de trace après la visite.
const champ = document.querySelector("#adresse");
champ.value = sessionStorage.getItem("adresse") ?? "";
champ.addEventListener("input", () => {
sessionStorage.setItem("adresse", champ.value);
});La Coalescence des nuls (??) évite d'écrire la chaîne "null" dans le champ au premier passage, quand la clé n'existe pas encore.
Cet espace n'a aucun rapport avec une session serveur. Il ne part jamais dans une requête, aucune donnée d'authentification n'y transite, et le serveur ne le voit pas.
Questions fréquentes
Deux onglets du même site partagent-ils leurs données ?
Non, et c'est la différence essentielle avec le stockage permanent. Chaque onglet possède son propre espace, même sur des pages identiques. Pour partager une information entre onglets, il faut passer par localStorage ou par un canal de diffusion dédié.
Y a-t-il un événement quand une valeur change ?
L'événement storage existe, mais il ne se déclenche que dans les autres documents de la même origine. Comme cet espace n'est pas partagé entre onglets, il ne sert quasiment jamais ici. Dans un seul onglet, mieux vaut appeler soi-même la fonction concernée après l'écriture.
Quelle taille peut-on y ranger ?
L'ordre de grandeur est le même que pour le stockage permanent, autour de quelques mégaoctets par origine, avec des variations selon les navigateurs. Le dépassement lève une erreur de quota, qui interrompt la fonction si personne ne l'attrape. Un try autour de l'écriture reste la précaution minimale.