localStorage vs sessionStorage : l'API Web Storage expliquée

L'API Web Storage offre au navigateur deux magasins clé-valeur simples — localStorage et sessionStorage — pour conserver de petites quantités de données sur l'appareil de l'utilisateur. Les deux partagent exactement la même API ; ils ne diffèrent que par la durée de vie des données et qui peut les voir.

L'API commune

Les deux objets exposent les mêmes cinq méthodes, et tous deux stockent uniquement des chaînes :

localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme'); // 'dark'
localStorage.removeItem('theme');
localStorage.clear();                          // tout effacer
console.log(localStorage.length);              // nombre de clés

Lire une clé inexistante renvoie null, vous pouvez donc prévoir un repli avec || :

const theme = localStorage.getItem('theme') || 'light';

La seule vraie différence : la durée de vie

Toute la décision tient en une phrase. localStorage persiste jusqu'à ce que vous le supprimiez — il survit aux rechargements, à la fermeture des onglets et au redémarrage du navigateur. sessionStorage ne vit que le temps de l'onglet : fermez l'onglet et les données disparaissent, et un deuxième onglet sur le même site obtient son propre magasin distinct.

Stocker des objets : stringify et parse

Comme le stockage ne contient que des chaînes, toute donnée structurée doit passer par JSON. Sérialisez à l'entrée, parsez à la sortie :

const user = { name: 'Ada', loggedIn: true };

// Sauvegarder
localStorage.setItem('user', JSON.stringify(user));

// Relire
const saved = JSON.parse(localStorage.getItem('user'));
console.log(saved.name); // 'Ada'

Enveloppez JSON.parse dans un try/catch quand la valeur peut manquer ou être corrompue — parser null ou un texte invalide lève une erreur :

function readJSON(key, fallback) {
  try {
    const raw = localStorage.getItem(key);
    return raw ? JSON.parse(raw) : fallback;
  } catch {
    return fallback;
  }
}

Portée et limite de taille

Le stockage est cloisonné par origine (schéma + hôte + port) : https://example.com et http://example.com ne partagent pas leurs données. Le quota est d'environ 5 Mo par origine dans la plupart des navigateurs — généreux pour des préférences et de petits caches, mais ce n'est pas une base de données. Le dépasser fait lever à setItem une QuotaExceededError, alors protégez les écritures volumineuses.

Réagir aux changements entre onglets

L'événement storage se déclenche sur les autres onglets de la même origine quand localStorage change — pratique pour synchroniser une déconnexion ou un changement de thème entre fenêtres ouvertes. Notez qu'il ne se déclenche pas dans l'onglet qui a fait la modification, et que sessionStorage ne le déclenche jamais :

window.addEventListener('storage', (event) => {
  if (event.key === 'theme') {
    applyTheme(event.newValue);
  }
});

Lequel choisir ?

	localStorage	sessionStorage
Durée de vie	Jusqu'à effacement explicite	Jusqu'à fermeture de l'onglet
Partagé entre onglets	Oui (même origine)	Non (par onglet)
Survit au rechargement	Oui	Oui
Déclenche l'événement storage	Oui	Non
Usage typique	Thème, réglages, « se souvenir de moi »	Brouillons de formulaire, étapes d'assistant

Choisissez localStorage quand la donnée doit subsister d'une visite à l'autre, et sessionStorage quand elle n'a de sens que pour l'onglet courant. Pour tout ce qui est sensible — jetons, mots de passe, données personnelles — aucun des deux ne convient : ils sont lisibles par n'importe quel script de la page, alors gardez les secrets entièrement hors du Web Storage.