Stocker dans le navigateur

localStorage, sessionStorage et cookies comparés.

◷ 15 minutesTravail sur votre machine

Objectifs

À la fin de cette leçon, vous saurez :

distinguer localStorage, sessionStorage et cookies ;
persister des données avec l'API localStorage ;
connaître les limites de ces stockages.

Trois tiroirs

Stockage	Durée de vie	Envoyé au serveur ?	Capacité
localStorage	permanent (jusqu'à effacement)	non	~5 Mo
sessionStorage	l'onglet courant	non	~5 Mo
cookies	configurable	oui, à chaque requête	~4 Ko

Règle de choix : préférences et brouillons → localStorage ; données éphémères d'onglet → sessionStorage ; jeton de session serveur → cookie (avec HttpOnly, comme le fera votre backend).

L'API localStorage

Tout est chaîne de caractères :

localStorage.setItem("theme", "sombre");
const theme = localStorage.getItem("theme");     // "sombre"
localStorage.removeItem("theme");

// objets : sérialiser en JSON
const prefs = { langue: "fr", notifications: true };
localStorage.setItem("prefs", JSON.stringify(prefs));
const relues = JSON.parse(localStorage.getItem("prefs"));

Pièges classiques :

getItem renvoie null si absent — toujours tester ;
JSON.parse(null) lance une exception ; gardez l'ordre : lire, tester, parser.

Le pattern « restaurer au chargement »

function chargerTheme() {
  const sauvegarde = localStorage.getItem("theme");
  if (sauvegarde) {
    document.body.classList.add(sauvegarde);
  }
}

document.addEventListener("DOMContentLoaded", chargerTheme);

Le combo complet d'une préférence : lire au démarrage, écouter les changements, écrire à chaque modification. C'est exactement ce que fera votre todo list persistante (défi du chapitre).

Limites à connaître

Accessible au JavaScript de la page : jamais de donnée sensible dedans (le cookie HttpOnly existe pour ça).
Lié à l'origine (protocole + domaine + port) : localhost:3000 ≠ localhost:3001.
Synchrones et bloquants : évitez de stocker de gros volumes.
Peut être vidé par l'utilisateur (nettoyage navigateur) : ce n'est pas une base de données fiable.

Exercice

En console sur n'importe quelle page : stockez puis relisez un prénom. Fermez l'onglet, rouvrez : encore là ?
Même test avec sessionStorage après fermeture d'onglet.
Écrivez sauverPrefs(objet) / lirePrefs() robustes (null-safe).

Résumé

localStorage = simple, permanent, côté client uniquement.
JSON.stringify/parse pour les structures ; null-check obligatoire.
Cookies = le seul stockage qui voyage vers le serveur.

Correction disponibleCherchez d’abord par vous-même.Voir la correction

Correction

Réponses détaillées

Question 2. sessionStorage survit aux rechargements mais disparaît avec l'onglet fermé : c'est sa définition même.

Question 3.

function sauverPrefs(prefs) {
  localStorage.setItem("prefs", JSON.stringify(prefs));
}

function lirePrefs() {
  const brute = localStorage.getItem("prefs");
  if (!brute) return { langue: "fr", notifications: true };   // valeurs par défaut
  try {
    return JSON.parse(brute);
  } catch {
    return { langue: "fr", notifications: true };             // donnée corrompue
  }
}

La version défensive couvre les deux échecs réels : absence (null) et contenu invalide (JSON cassé).