Stocker des données localement avec localStorage et sessionStorage

🛠️ Les méthodes essentielles

Les deux objets partagent les mêmes méthodes. Voici comment les utiliser :

// Sauvegarder une donnée
localStorage.setItem('nom', 'Alice');
sessionStorage.setItem('theme', 'sombre');

// Récupérer une donnée
const nom = localStorage.getItem('nom');       // "Alice"
const theme = sessionStorage.getItem('theme'); // "sombre"

// Supprimer une donnée précise
localStorage.removeItem('nom');

// Supprimer toutes les données du stockage
localStorage.clear();

Les valeurs sont toujours des chaînes de caractères. Pour stocker des objets ou des tableaux, il faut les convertir en JSON (voir plus bas).

🧠 Stocker des objets et tableaux

localStorage ne comprend que le texte. Pour enregistrer un objet, utilisez JSON.stringify() avant setItem(), puis JSON.parse() pour le récupérer.

const utilisateur = {
  id: 1,
  nom: 'Dupont',
  preferences: { langue: 'fr', notifications: true }
};

// Stockage
localStorage.setItem('utilisateur', JSON.stringify(utilisateur));

// Récupération
const utilisateurStocke = JSON.parse(localStorage.getItem('utilisateur'));
console.log(utilisateurStocke.preferences.langue); // "fr"

Cette technique fonctionne aussi pour les tableaux, les dates (converties en string), ou tout objet sérialisable.

⏳ Différence entre localStorage et sessionStorage

Le tableau ci-dessous résume leurs différences :

• Durée de vie : localStorage → permanente (jusqu'à suppression manuelle ou via code). sessionStorage → jusqu'à fermeture de l'onglet.
• Partage entre onglets : localStorage → oui, entre tous les onglets d'une même origine. sessionStorage → non, chaque onglet a son propre espace.
• Capacité : environ 5 à 10 Mo par origine (selon navigateur), pour les deux.

Exemple concret : Pour un formulaire en plusieurs étapes, utilisez sessionStorage (données temporaires). Pour le thème sombre/clair ou un token d'authentification, préférez localStorage.

🔍 Inspecter et déboguer le stockage

Tous les navigateurs offrent un outil pour visualiser le contenu de localStorage et sessionStorage :

• Dans Chrome/Edge : onglet "Application" → "Stockage local" / "Stockage de session".
• Dans Firefox : onglet "Stockage" → "Stockage local" / "Stockage de session".
• Vous pouvez aussi les lister en JavaScript : for(let i=0; i < localStorage.length; i++) { let key = localStorage.key(i); ... }

Cela vous permet de vérifier que vos données sont bien sauvegardées ou de les effacer manuellement pendant le développement.

⚡ Écouter les changements (événement storage)

L'événement storage est déclenché sur tous les autres onglets (ou fenêtres) de la même origine lorsqu'une modification est effectuée dans localStorage. C'est très utile pour synchroniser une application multi-onglets.

window.addEventListener('storage', (event) => {
  console.log(`La clé "${event.key}" a changé`);
  console.log(`Ancienne valeur : ${event.oldValue}`);
  console.log(`Nouvelle valeur : ${event.newValue}`);
  console.log(`Zone concernée : ${event.storageArea}`); // localStorage ou sessionStorage
});

Note : Cet événement ne se déclenche pas dans l'onglet qui a fait la modification, seulement dans les autres onglets de la même origine.

⚠️ Limites et bonnes pratiques

• Ne stockez jamais d'informations sensibles (mot de passe, token d'accès critique) car n'importe quel script sur la page peut y accéder.
• Le stockage est synchrone : les opérations lourdes (grosses données) peuvent bloquer l'interface. Préférez des données légères.
• Respectez la capacité maximale (environ 5 Mo). Au-delà, le navigateur lèvera une exception QuotaExceededError.
• Pensez à gérer les erreurs (ex : espace disque plein, mode privé). Utilisez try...catch autour de setItem().

🔄 Exemple complet : formulaire sauvegardé automatiquement

Voici un mini-exemple qui sauvegarde les champs d'un formulaire dans localStorage à chaque saisie, et les restaure au chargement.

// Sauvegarde automatique
const form = document.querySelector('#monFormulaire');
const sauvegarder = () => {
  const data = {
    nom: form.nom.value,
    email: form.email.value,
    message: form.message.value
  };
  localStorage.setItem('formData', JSON.stringify(data));
};

form.addEventListener('input', sauvegarder);

// Restauration au chargement
window.addEventListener('DOMContentLoaded', () => {
  const saved = localStorage.getItem('formData');
  if (saved) {
    const data = JSON.parse(saved);
    form.nom.value = data.nom || '';
    form.email.value = data.email || '';
    form.message.value = data.message || '';
  }
});

Ce mécanisme évite de perdre les données saisies en cas de rafraîchissement accidentel de la page.