localStorage et sessionStorage : stocker des données dans le navigateur

localStorage est un espace de stockage clé-valeur du navigateur, propre à chaque site, où une page peut enregistrer du texte qui reste disponible à la visite suivante ; sessionStorage fonctionne pareil mais s'efface quand on ferme l'onglet. Ce chapitre montre comment y ranger des objets en JSON, comment gérer un stockage absent ou corrompu, et surtout ce qu'il ne faut jamais y mettre : les jetons d'authentification et les données sensibles.

localStorage, sessionStorage et cookies : les différences

« Le même site » veut dire la même origine : même protocole, même domaine, même port. http://localhost:5173 et http://localhost:8000 sont deux origines différentes, avec deux stockages séparés. C'est pour cela que tes données semblent « disparaître » quand tu changes de serveur de développement.

Utilise localStorage pour ce qui doit survivre à une fermeture du navigateur (les préférences d'affichage, un brouillon, le stock de Gestock dans sa version sans serveur), sessionStorage pour ce qui ne concerne que l'onglet en cours (l'étape atteinte dans un formulaire en plusieurs pages).

Les méthodes : setItem, getItem, removeItem

localStorage.setItem('gestock.theme', 'sombre');   // enregistre
localStorage.getItem('gestock.theme');             // 'sombre'
localStorage.getItem('cle-inexistante');           // null
localStorage.removeItem('gestock.theme');          // supprime une clé
localStorage.clear();                              // supprime TOUT le stockage du site
localStorage.length;                               // nombre de clés

sessionStorage a exactement les mêmes méthodes. Préfixe tes clés avec le nom de l'application (gestock.pieces, gestock.theme) : plusieurs scripts d'un même site partagent le stockage, et des clés génériques comme data finissent par se marcher dessus.

Stocker un objet ou un tableau : JSON obligatoire

Le stockage ne garde que des chaînes. Tout le reste est converti en texte, souvent de façon inutilisable :

localStorage.setItem('quantite', 12);
typeof localStorage.getItem('quantite');   // 'string' : '12'

localStorage.setItem('piece', { ref: 'SSD-512' });
localStorage.getItem('piece');             // '[object Object]' : les données sont perdues

Pour un objet ou un tableau, passe par JSON (chapitre 6) : JSON.stringify à l'écriture, JSON.parse à la lecture.

const pieces = [{ ref: 'SSD-512', quantite: 12 }, { ref: 'RAM-16', quantite: 3 }];

localStorage.setItem('gestock.pieces', JSON.stringify(pieces));

const relues = JSON.parse(localStorage.getItem('gestock.pieces'));
relues[1].quantite;   // 3 : un vrai nombre

Gérer les erreurs : stockage absent, plein ou corrompu

Lire le stockage peut mal se passer, et ton application doit continuer à fonctionner :

La réponse est la même dans tous les cas : entourer les accès d'un try…catch et prévoir une valeur par défaut. Voici le module stockage.js de Gestock :

const CLE = 'gestock.pieces';

export function chargerPieces(parDefaut) {
  try {
    const json = localStorage.getItem(CLE);
    if (json === null) return parDefaut;
    const donnees = JSON.parse(json);
    return Array.isArray(donnees) ? donnees : parDefaut;
  } catch (erreur) {
    console.warn('Stock local illisible, données par défaut utilisées.', erreur);
    return parDefaut;
  }
}

export function sauvegarderPieces(pieces) {
  try {
    localStorage.setItem(CLE, JSON.stringify(pieces));
    return true;
  } catch (erreur) {
    console.warn("Impossible d'enregistrer le stock.", erreur);
    return false;
  }
}

chargerPieces vérifie aussi que ce qu'elle a lu est bien un tableau (Array.isArray) : du JSON valide n'est pas forcément du JSON attendu. sauvegarderPieces renvoie true ou false pour que l'interface puisse prévenir l'utilisateur si l'enregistrement a échoué.

Ce qu'il ne faut jamais stocker : les jetons et les données sensibles

Tout script qui s'exécute dans ta page peut lire tout le localStorage et le sessionStorage de ton site. Ton code, mais aussi celui des bibliothèques que tu charges, d'un outil de statistiques, d'une extension malveillante, ou d'un attaquant qui a réussi un XSS (chapitre 7). Il n'existe aucun moyen de réserver une clé à un seul script.

D'où la règle : n'y range rien qui donnerait un pouvoir à celui qui le lit.

Où mettre la session d'un utilisateur connecté, alors ? La recommandation actuelle pour une application web : un cookie de session posé par le serveur avec les attributs HttpOnly (illisible par JavaScript), Secure (envoyé seulement en HTTPS) et SameSite=Lax ou Strict (pas envoyé par des requêtes venues d'autres sites). Ton JavaScript ne voit jamais le jeton ; le navigateur l'envoie tout seul à l'API. Un XSS reste grave (le script peut agir pendant que la page est ouverte), mais il ne peut pas voler la session pour l'utiliser ailleurs.

Enfin, le droit s'applique aussi à ce stockage. La CNIL considère que les règles des cookies (article 82 de la loi Informatique et Libertés) visent tous les « traceurs », y compris ce qu'une page écrit dans localStorage : un stockage strictement nécessaire au service que l'utilisateur demande (son panier, ses préférences d'affichage, le stock de Gestock) est dispensé de consentement, un stockage de mesure d'audience ou de publicité ne l'est pas (cours Droit et RGPD).

Synchroniser plusieurs onglets : l'événement storage

Quand une page modifie localStorage, les autres onglets ouverts sur le même site reçoivent un événement storage (pas l'onglet qui a fait la modification). Gestock peut s'en servir pour rester à jour si le gérant l'a ouvert deux fois :

window.addEventListener('storage', (event) => {
  if (event.key === 'gestock.pieces') {
    etat.pieces = chargerPieces([]);
    rafraichir();
  }
});

Voir et modifier le stockage dans les outils de développement

Dans Chrome et Edge, l'onglet Application, rubrique Stockage local (Local storage), affiche les clés et les valeurs de chaque origine. Firefox les montre dans l'onglet Stockage, Safari dans Stockage. Tu peux y modifier une valeur à la main (pratique pour simuler des données corrompues et tester ton try…catch), supprimer une clé, ou tout effacer pour retrouver une première visite. Le bouton « Effacer les données du site » de l'onglet Application vide d'un coup stockage, cookies et cache.

Fil rouge : Gestock garde son stock

Dans main.js, deux changements suffisent : enregistrer après chaque modification, relire au démarrage.

import { chargerPieces, sauvegarderPieces } from './stockage.js';

function modifierStock(pieces) {
  etat.pieces = pieces;
  sauvegarderPieces(etat.pieces);   // nouveau : chaque changement est enregistré
  rafraichir();
}

const PIECES_DE_DEPART = [ /* le stock de départ du chapitre 1 */ ];
etat.pieces = chargerPieces(PIECES_DE_DEPART);
rafraichir();

Recharge la page après avoir ajouté une pièce : elle est toujours là. Ouvre l'onglet Application : la clé gestock.pieces contient le tableau en JSON. Au chapitre 10, le stock de départ viendra d'une API au lieu d'être écrit dans le code.

Attention, ce stockage reste local au navigateur : le gérant ne verra pas sur son téléphone ce qu'un technicien a saisi sur le poste de l'atelier. Pour partager les données, il faut un serveur et une base, c'est-à-dire une API (créer une API REST avec Node.js et Express).

Exercices

localStorage.clear();
localStorage.setItem('n', 5);
localStorage.setItem('liste', ['SSD-512', 'RAM-16']);
localStorage.setItem('obj', JSON.stringify({ ok: true }));
const a = localStorage.getItem('n') + 1;
const b = localStorage.getItem('liste');
const c = JSON.parse(localStorage.getItem('obj')).ok;
const d = localStorage.getItem('absente');

const CLE_FILTRE = 'gestock.alertesSeules';

function lireFiltre() {
  try {
    return localStorage.getItem(CLE_FILTRE) === 'true';
  } catch {
    return false;
  }
}

caseAlertes.checked = lireFiltre();
etat.alertesSeules = caseAlertes.checked;

caseAlertes.addEventListener('change', () => {
  etat.alertesSeules = caseAlertes.checked;
  try {
    localStorage.setItem(CLE_FILTRE, String(caseAlertes.checked));
  } catch {
    // Stockage indisponible : le filtre marche, il ne sera simplement pas retenu.
  }
  rafraichir();
});

const reponse = await fetch('/api/connexion', { method: 'POST', body: JSON.stringify({ email, motDePasse }) });
const { jeton } = await reponse.json();
localStorage.setItem('jeton', jeton);
localStorage.setItem('motDePasse', motDePasse);   // pour la reconnexion automatique