localStorage et sessionStorage

Tout est texte : le piège n° 1

Un code robuste

• Le stockage peut poser trois problèmes : la clé n'existe pas encore (null), le texte enregistré n'est pas du JSON valide (modifié à la main, ancienne version de l'application), ou le stockage est plein ou bloqué (erreur QuotaExceededError, réglages de confidentialité).
• On regroupe donc l'accès dans deux fonctions qui ne plantent jamais, stockage.js:

// Lire et écrire des objets JavaScript (et pas seulement du texte), sans jamais planter

function lire(cle, valeurParDefaut = null, stockage = localStorage) {
  try {
    const brut = stockage.getItem(cle);
    return brut === null ? valeurParDefaut : JSON.parse(brut);
  } catch {
    return valeurParDefaut; // JSON abîmé ou stockage bloqué
  }
}

function ecrire(cle, valeur, stockage = localStorage) {
  try {
    stockage.setItem(cle, JSON.stringify(valeur));
    return true;
  } catch (erreur) {
    console.error(`Impossible d'enregistrer « ${cle} » :`, erreur.name); // QuotaExceededError…
    return false;
  }
}

// Variante avec date d'expiration (le localStorage n'en a pas)
function ecrireAvecExpiration(cle, valeur, minutes) {
  return ecrire(cle, { valeur, expire: Date.now() + minutes * 60 * 1000 });
}

function lireAvecExpiration(cle) {
  const entree = lire(cle);
  if (!entree || Date.now() > entree.expire) {
    localStorage.removeItem(cle);
    return null;
  }
  return entree.valeur;
}

• lire() renvoie une valeur par défaut au lieu de planter ; ecrire() renvoie false si l'enregistrement a échoué, pour pouvoir prévenir l'utilisateur.
• Le paramètre stockage permet d'utiliser les mêmes fonctions avec sessionStorage.
• Le localStorage n'a pas de date d'expiration : ecrireAvecExpiration() en ajoute une en stockant la date limite avec la valeur.

6. Exemple complet : préférences et brouillon

La page mémorise la taille du texte et le thème choisis (pour toujours, dans le localStorage) et le message en cours d'écriture (pour l'onglet, dans le sessionStorage).

index.html:

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <title>Préférences et brouillon</title>
    <script src="stockage.js" defer></script>
    <script src="preferences.js" defer></script>
  </head>
  <body>
    <h2>Mes préférences (localStorage)</h2>
    <label>
      Taille du texte
      <select id="taille">
        <option value="16px">Normale</option>
        <option value="20px">Grande</option>
        <option value="24px">Très grande</option>
      </select>
    </label>
    <label><input id="sombre" type="checkbox" /> Thème sombre</label>

    <h2>Message au formateur (brouillon en sessionStorage)</h2>
    <form id="form-message">
      <textarea id="message" rows="5" cols="50" placeholder="Votre message…"></textarea>
      <br />
      <button type="submit">Envoyer</button>
      <span id="etat"></span>
    </form>
  </body>
</html>

preferences.js:

const CLE_PREFS = "prefs";
const prefs = lire(CLE_PREFS, { taille: "16px", sombre: false });

const choixTaille = document.getElementById("taille");
const choixSombre = document.getElementById("sombre");

function appliquer() {
  document.body.style.fontSize = prefs.taille;
  document.body.style.background = prefs.sombre ? "#1e1e1e" : "";
  document.body.style.color = prefs.sombre ? "#eee" : "";
  choixTaille.value = prefs.taille;
  choixSombre.checked = prefs.sombre;
}

choixTaille.addEventListener("change", () => {
  prefs.taille = choixTaille.value;
  ecrire(CLE_PREFS, prefs);
  appliquer();
});

choixSombre.addEventListener("change", () => {
  prefs.sombre = choixSombre.checked;
  ecrire(CLE_PREFS, prefs);
  appliquer();
});

// Un autre onglet a modifié les préférences : on se met à jour
window.addEventListener("storage", (event) => {
  if (event.key === CLE_PREFS) {
    Object.assign(prefs, lire(CLE_PREFS, {}));
    appliquer();
  }
});

appliquer();

// ---------- Brouillon : survit à un rechargement, disparaît à la fermeture de l'onglet
const zone = document.getElementById("message");
zone.value = sessionStorage.getItem("brouillon") ?? "";

zone.addEventListener("input", () => {
  sessionStorage.setItem("brouillon", zone.value);
  document.getElementById("etat").textContent = "Brouillon enregistré";
});

document.getElementById("form-message").addEventListener("submit", (event) => {
  event.preventDefault();
  sessionStorage.removeItem("brouillon");
  zone.value = "";
  document.getElementById("etat").textContent = "Message envoyé ✅";
});

• Les préférences sont rangées dans un seul objet sous une seule clé : plus simple à lire, à écrire et à faire évoluer.
• Le brouillon est enregistré à chaque frappe (événement input) : un rechargement accidentel ne fait rien perdre. Il est effacé après l'envoi.

Synchroniser plusieurs onglets : l'événement storage

• Quand un onglet modifie le localStorage, les autres onglets ouverts sur le même site reçoivent l'événement storage (l'onglet qui a fait la modification ne le reçoit pas).
• L'événement contient key (la clé modifiée, ou null après un clear()), oldValue, newValue et url (la page à l'origine du changement).
• Dans l'exemple, changez la taille du texte dans un onglet : le second onglet se met à jour tout seul. On relit la valeur avec lire(), qui ne plante pas si elle est abîmée.
• Usages : déconnexion dans tous les onglets, panier ou liste de tâches tenus à jour partout.

localStorage, sessionStorage ou cookie ?

Limites et sécurité

• Rien n'est secret. L'utilisateur peut lire et modifier son stockage, et tout script de la page aussi : une faille XSS permet de voler tout le localStorage. N'y mettez jamais de mot de passe, de numéro de carte ni de jeton d'authentification de longue durée (préférez un cookie HttpOnly posé par le serveur).
• Ne faites pas confiance aux données relues: vérifiez leur format avant de les utiliser, et affichez-les avec textContent.
• API synchrone: chaque lecture ou écriture bloque la page un instant. C'est négligeable pour quelques Ko, mais pas pour plusieurs Mo : utilisez alors IndexedDB.
• Données effaçables: l'utilisateur peut vider ses données de navigation, et la navigation privée efface tout à la fermeture. Safari supprime aussi, après 7 jours sans visite, les données des sites consultés sans interaction. Gardez toujours une copie importante sur un serveur ou proposez un export.
• Versionnez vos clés ("todo:taches:v1") : si la structure des données change, l'application saura reconnaître et convertir les anciennes données.

Activités

À retenir

• setItem(), getItem(), removeItem(), clear(); les valeurs sont des chaînes.
• Objets et tableaux : JSON.stringify() pour écrire, JSON.parse() (dans un try / catch) pour lire.
• localStorage: permanent et partagé entre onglets ; sessionStorage: un par onglet, effacé à sa fermeture.
• L'événement storage synchronise les onglets ; aucune donnée sensible dans le stockage.

Sources : MDN Web Docs, web.dev, CNIL, INPDP.