Stockage Web : localStorage, sessionStorage, Cookies & IndexedDB Comparés

Les applications web modernes dépendent fortement de la capacité à stocker des données côté client. Qu'il s'agisse de préférences utilisateur, de jetons d'authentification, de données en cache, du contenu d'un panier d'achat ou d'ébauches de formulaires, les navigateurs mettent à disposition diverses méthodes de persistance. Chaque mécanisme possède ses propres spécificités, et une mauvaise sélection peut entraîner des problèmes de performance, des failles de sécurité ou une perte de données précieuses.

Aperçu Comparatif

Caractéristique    localStorage    sessionStorage   Cookies          IndexedDB
──────────────────────────────────────────────────────────────────────────────
Capacité           5-10 Mo         5-10 Mo          ~4 Ko/cookie     100Mo+
Persistance        Permanent       Durée de l'onglet Configurable     Permanent
Envoyé au serveur  Non             Non              Oui (chaque req) Non
Accès              JS synchrone    JS synchrone     JS + HTTP        JS asynchrone
Format des données Chaîne          Chaîne           Chaîne           Tout (objets)
Cas d'utilisation  Préférences     État temporaire  Jetons d'authent. Grands ensembles

localStorage

Le localStorage permet de stocker des paires clé-valeur de manière persistante, sans date d'expiration. Les données y demeurent disponibles d'une session à l'autre, jusqu'à ce qu'elles soient explicitement supprimées par l'utilisateur via les paramètres du navigateur, ou par votre propre code JavaScript.

// Stocker des données (chaînes de caractères uniquement)
localStorage.setItem('theme', 'dark');
localStorage.setItem('user', JSON.stringify({ name: 'Alice', id: 123 }));

// Récupérer des données
const theme = localStorage.getItem('theme'); // "dark"
const user = JSON.parse(localStorage.getItem('user'));

// Supprimer un élément spécifique
localStorage.removeItem('theme');

// Effacer toutes les données
localStorage.clear();

// Vérifier l'utilisation du stockage
const used = new Blob(Object.values(localStorage)).size;
console.log(`${(used / 1024).toFixed(1)} KB utilisés`);

Idéal pour : Préférences de thème, choix de langue, état de l'interface utilisateur (barre latérale ouverte/fermée), ou tout paramètre non sensible qui doit persister.

⚠️ Ne jamais stocker : Les jetons d'authentification, mots de passe, ou toute donnée confidentielle. Le localStorage est directement accessible à tout script JavaScript exécuté sur la page, y compris ceux potentiellement injectés via des attaques XSS.

sessionStorage

L'API de sessionStorage est en tous points identique à celle de localStorage, mais sa portée est limitée à l'onglet du navigateur en cours. Les données stockées sont automatiquement effacées dès que l'onglet est fermé, ou en cas de crash du navigateur.

// Stocker les données de formulaire (récupérables en cas de navigation accidentelle)
const formData = { name: nameInput.value, email: emailInput.value };
sessionStorage.setItem('formDraft', JSON.stringify(formData));

// Restaurer au chargement de la page
window.addEventListener('load', () => {
  const draft = sessionStorage.getItem('formDraft');
  if (draft) {
    const { name, email } = JSON.parse(draft);
    nameInput.value = name;
    emailInput.value = email;
  }
});

Idéal pour : Données de formulaires multi-étapes, états temporaires de "wizards", données spécifiques à un onglet qui ne devraient pas être partagées entre plusieurs instances.

Cookies

Mécanisme de stockage le plus ancien et le plus familier, les cookies se distinguent par une caractéristique cruciale : ils sont transmis au serveur avec chaque requête HTTP. Cette propriété les rend indispensables pour l'authentification et la gestion de sessions, mais totalement inadaptés au stockage de volumes importants de données.

// Définition d'un cookie (côté serveur — Express.js)
res.cookie('session_id', 'abc123', {
  httpOnly: true,   // JavaScript ne peut pas accéder à ce cookie (protection XSS)
  secure: true,     // Envoyé uniquement via HTTPS
  sameSite: 'Lax',  // Protection CSRF
  maxAge: 86400000, // Expire dans 24 heures (millisecondes)
  path: '/',
});

// Définition d'un cookie (côté client JavaScript)
document.cookie = "theme=dark; path=/; max-age=31536000; SameSite=Lax";

// Lecture des cookies (côté client) — API peu pratique
const theme = document.cookie
  .split('; ')
  .find(row => row.startsWith('theme='))
  ?.split('=')[1]; // "dark"

Idéal pour : IDs de session, jetons d'authentification (avec les attributs httpOnly, secure et sameSite configurés correctement).

⚠️ Attributs importants des cookies :

• httpOnly — Empêche l'accès du cookie par JavaScript, protégeant ainsi contre le vol de jetons par XSS.
• secure — Garantit que le cookie n'est envoyé qu'avec des requêtes HTTPS.
• sameSite=Lax|Strict — Offre une protection contre les attaques CSRF (Cross-Site Request Forgery).

IndexedDB

IndexedDB est une véritable base de données NoSQL côté client, intégrée au navigateur. Il permet de stocker des données structurées (objets JavaScript, fichiers, BLOBs) et de les indexer pour des requêtes complexes. Son API est entièrement asynchrone et offre une capacité de stockage pouvant atteindre plusieurs centaines de mégaoctets, voire des gigaoctets sur certains navigateurs.

// Ouvrir la base de données
const request = indexedDB.open('MyApp', 1);

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const store = db.createObjectStore('products', { keyPath: 'id' });
  store.createIndex('category', 'category', { unique: false });
};

request.onsuccess = (event) => {
  const db = event.target.result;

  // Ajouter des données
  const tx = db.transaction('products', 'readwrite');
  tx.objectStore('products').add({
    id: 1,
    name: 'Widget',
    category: 'tools',
    price: 29.99,
  });

  // Lire des données
  const getTx = db.transaction('products', 'readonly');
  const getReq = getTx.objectStore('products').get(1);
  getReq.onsuccess = () => console.log(getReq.result);
};

Idéal pour : Applications hors ligne (Offline-first), mise en cache de grands ensembles de données, stockage de fichiers volumineux ou de BLOBs, applications web progressives (PWA).

Guide de Décision

• Préférence de thème/langue ? → localStorage
• Ébauche de données de formulaire ? → sessionStorage
• Session d'authentification ? → Cookie HttpOnly Sécurisé
• Panier d'achat ? → localStorage (visiteur) ou côté serveur (utilisateur connecté)
• Cache de données hors ligne ? → IndexedDB
• Stockage de fichiers volumineux ? → IndexedDB
• Données nécessaires au serveur ? → Cookie