localStorage en JavaScript : garder une donnée d'une visite à l'autre

Un thème sombre choisi hier, un panier abandonné la semaine dernière, un bandeau déjà refusé : ces informations doivent survivre à la fermeture du navigateur, sans passer par un compte ni par un serveur.

Le navigateur réserve pour cela un petit espace par site, avec une interface volontairement minuscule : lire, écrire, effacer, et rien de plus.

Définition

localStorage est un espace de stockage clé-valeur attaché à une origine, c'est-à-dire au trio protocole, domaine et port. Les données y restent sans date d'expiration, jusqu'à ce qu'un script ou le visiteur les efface.

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

console.log(localStorage.getItem("theme"));    // "sombre"
console.log(localStorage.getItem("inconnue")); // null

localStorage.removeItem("theme");
localStorage.clear();                          // tout l'espace de l'origine

Une clé absente rend null, jamais undefined : la distinction compte quand la valeur lue sert de condition.

Tout devient du texte

L'espace ne stocke que des chaînes de caractères. Une valeur d'un autre type est convertie en silence, ce qui produit des surprises au moment de la relecture.

localStorage.setItem("connecte", true);
console.log(localStorage.getItem("connecte") === true);   // false
console.log(typeof localStorage.getItem("connecte"));     // "string"

localStorage.setItem("panier", JSON.stringify({ lignes: 3 }));
const panier = JSON.parse(localStorage.getItem("panier"));
console.log(panier.lignes + 1);                           // 4

Un objet passe donc par JSON à l'aller comme au retour. La chaîne "false" relue reste Truthy et falsy du côté vrai, ce qui suffit à inverser une condition entière.

Ce qu'il ne faut pas y mettre

Tout script chargé par la page lit cet espace, y compris un script tiers ou un script injecté par une faille. Trois catégories sont donc à écarter.

• Un jeton d'authentification : lisible par n'importe quel script, là où un Cookie marqué HttpOnly ne l'est pas.
• Une donnée personnelle : elle reste sur la machine bien après la visite, sur un poste parfois partagé.
• Un gros volume : la limite tourne autour de cinq mégaoctets par origine, et une base locale relève d'IndexedDB.

L'écriture peut aussi échouer : quota dépassé, navigation privée, stockage désactivé. Un appel enveloppé dans un try évite qu'une page entière s'arrête sur cette ligne.

Questions fréquentes

Le navigateur émet un événement storage sur la fenêtre, avec l'ancienne et la nouvelle valeur. Une particularité utile : il ne se déclenche que dans les autres documents de la même origine, jamais dans celui qui vient d'écrire. C'est ce qui permet de synchroniser une déconnexion sur tous les onglets ouverts.

Il n'y a pas de date d'expiration, mais rien ne garantit la permanence. Le visiteur peut vider son navigateur, et certains navigateurs effacent d'eux-mêmes le stockage écrit par un script après une longue période sans visite. Traitez cet espace comme un confort, jamais comme la seule copie d'une donnée.

Les deux partagent exactement la même interface, seule la durée de vie change. Choisissez le premier pour une préférence qui doit tenir d'une visite à l'autre, et sessionStorage pour une donnée qui n'a de sens que dans l'onglet en cours, comme l'étape d'un formulaire en plusieurs pages.