localStorage : sessionStorage et cookies

Le navigateur propose plusieurs stockages. Le bon choix dépend de la durée, de la taille, de la sensibilité et de la nécessité d’envoyer la donnée au serveur.

`sessionStorage`

Même API que localStorage, mais les données sont propres à l’onglet et disparaissent à sa fermeture :

sessionStorage.setItem('etapeFormulaire', '2');
sessionStorage.getItem('etapeFormulaire'); // '2'

	`localStorage`	`sessionStorage`
Durée	Permanente	Durée de vie de l’onglet
Partage entre onglets	Oui	Non (chaque onglet a le sien)
Après rechargement de la page	Conservé	Conservé
Événement `storage`	Autres onglets	Seulement entre `iframe` du même onglet

Un onglet dupliqué démarre avec une copie du sessionStorage de l’original, puis les deux évoluent séparément. Usages : brouillon d’une étape de formulaire, état d’un assistant, filtre en cours.

Cookies

Un cookie est une petite donnée envoyée automatiquement au serveur avec chaque requête vers son domaine.

document.cookie = 'langue=fr; Max-Age=31536000; Path=/; SameSite=Lax; Secure';

Le serveur peut aussi les définir (Set-Cookie) avec des attributs de sécurité :

Set-Cookie: session=valeur; Path=/; HttpOnly; Secure; SameSite=Lax; Max-Age=3600

Attribut	Rôle
`HttpOnly`	Cookie illisible par JavaScript (protège la session du vol par XSS)
`Secure`	Envoyé en HTTPS seulement
`SameSite=Lax` ou `Strict`	Limite l’envoi lors de requêtes entre sites (protection contre le CSRF)
`Max-Age`, `Expires`	Durée de vie (sinon cookie de session)
`Path`, `Domain`	Portée

Tableau comparatif

	`localStorage`	`sessionStorage`	Cookie	IndexedDB	Cache API
Durée	Permanente	Onglet	Configurable	Permanente	Permanente
Taille	~5 Mo	~5 Mo	~4 Ko par cookie	Très grande (selon l’espace disque)	Grande
Envoyé au serveur	Non	Non	Oui, à chaque requête	Non	Non
Lisible en JavaScript	Oui	Oui	Oui, sauf `HttpOnly`	Oui	Oui
Données	Chaînes	Chaînes	Chaînes	Objets, fichiers, binaires	Réponses HTTP
Accès	Synchrone	Synchrone	Synchrone	Asynchrone	Asynchrone
Disponible dans un Web Worker	Non	Non	Non	Oui	Oui

Que choisir ?

Besoin	Choix
Préférence d’interface (thème, langue)	`localStorage`
Brouillon d’un formulaire en cours	`sessionStorage` (ou `localStorage` pour survivre à la fermeture)
Session d’authentification	Cookie `HttpOnly; Secure; SameSite` défini par le serveur
Donnée à envoyer au serveur avec chaque requête	Cookie
Beaucoup de données, recherche, fichiers, hors ligne	IndexedDB
Réponses réseau pour un site hors ligne	Cache API (avec un service worker)
Donnée partagée entre appareils	Le serveur

Pourquoi pas de jeton d’authentification dans localStorage ?

Tout script exécuté dans la page peut lire localStorage. Si un attaquant parvient à injecter du JavaScript (faille XSS), il vole le jeton. Un cookie HttpOnly reste inaccessible aux scripts. Voir Sécurité et confidentialité.

Cookies depuis JavaScript : un petit utilitaire

export function lireCookie(nom) {
  const paire = document.cookie
    .split('; ')
    .find((c) => c.startsWith(nom + '='));
  return paire ? decodeURIComponent(paire.split('=')[1]) : null;
}

export function ecrireCookie(nom, valeur, jours = 365) {
  document.cookie = `${nom}=${encodeURIComponent(valeur)}; Max-Age=${jours * 86400}; Path=/; SameSite=Lax; Secure`;
}

export function supprimerCookie(nom) {
  document.cookie = `${nom}=; Max-Age=0; Path=/`;
}

L’API Cookie Store (cookieStore.get(...)) existe dans certains navigateurs récents, avec des promesses ; la compatibilité n’est pas complète.

Côté serveur

Un serveur qui définit ou lit des cookies a besoin d’un analyseur (cookie-parser avec Express, voir Express : middlewares). En cas de reverse proxy HTTPS, l’attribut Secure demande que l’application sache qu’elle est servie en HTTPS (trust proxy, voir Express : sécurité et production).

Dépannage

Symptôme	Piste
Donnée perdue en fermant l’onglet	`sessionStorage` : utiliser `localStorage`
Un autre onglet ne voit pas la valeur	`sessionStorage` est propre à l’onglet
Le cookie n’est pas enregistré	`Secure` sans HTTPS, domaine invalide, `SameSite=None` sans `Secure`
`document.cookie` ne montre pas le cookie de session	Attribut `HttpOnly` : normal
Requêtes lentes avec beaucoup de cookies	Chaque cookie est renvoyé à chaque requête : réduire leur nombre et leur taille
Les cookies ne sont pas envoyés dans un appel `fetch` entre domaines	`credentials: 'include'` et configuration CORS