Local Storage HTML5

Avant localStorage, la seule façon de conserver des informations côté client était les cookies — limités à 4 Ko, envoyés à chaque requête HTTP, et peu pratiques à manipuler. L'API Web Storage, introduite avec HTML5, change la donne. localStorage offre jusqu'à 5 à 10 Mo de stockage par domaine, reste côté navigateur, et se manipule avec trois lignes de JavaScript.

C'est l'outil idéal pour les préférences utilisateur (thème sombre, langue), les données de formulaire en brouillon, ou les petits caches de données qui n'ont pas besoin de transiter par un serveur.

Comment fonctionne localStorage

localStorage repose sur un système clé/valeur : vous associez une valeur textuelle à un nom de clé. Les données sont liées à un domaine précis et restent disponibles jusqu'à ce que vous les supprimiez explicitement ou que l'utilisateur vide son cache.

Deux points importants à retenir :

• localStorage ne stocke que des chaînes de caractères. Pour stocker un objet ou un tableau, il faut le convertir en JSON.
• Il n'y a pas d'expiration automatique. Contrairement aux cookies, vos données restent là indéfiniment.

Les méthodes essentielles

L'API expose quatre opérations de base. Voici un exemple complet qui couvre l'écriture, la lecture, la suppression d'une clé et la réinitialisation totale :

Exemple :   📋 Copier le code

// Stocker une valeur simple
localStorage.setItem('theme', 'dark');

// Lire une valeur (retourne null si la clé n'existe pas)
const theme = localStorage.getItem('theme');
console.log(theme); // "dark"

// Supprimer une clé spécifique
localStorage.removeItem('theme');

// Vider tout le localStorage du domaine
localStorage.clear();

Stocker des objets avec JSON

localStorage n'acceptant que du texte, il faut sérialiser vos objets avec JSON.stringify() avant l'écriture, et les désérialiser avec JSON.parse() à la lecture. C'est le pattern le plus courant en pratique :

Exemple :   📋 Copier le code

// Objet utilisateur à stocker
const utilisateur = {
  nom: 'Alice',
  langue: 'fr',
  notifications: true
};

// Sérialiser en JSON avant de stocker
localStorage.setItem('utilisateur', JSON.stringify(utilisateur));

// Désérialiser à la lecture
const donnees = localStorage.getItem('utilisateur');
const userRecupere = JSON.parse(donnees);

console.log(userRecupere.nom); // "Alice"
console.log(userRecupere.langue); // "fr"

Vérifier si une clé existe

getItem() retourne null quand la clé est absente. C'est la façon la plus propre de tester l'existence d'une donnée avant de l'utiliser :

Exemple :   📋 Copier le code

// Lire le thème ou utiliser la valeur par défaut
const theme = localStorage.getItem('theme');

if (theme !== null) {
  appliquerTheme(theme);
} else {
  appliquerTheme('light'); // valeur par défaut
}

Exemple pratique : sauvegarder les préférences utilisateur

Voici un cas d'usage concret — un formulaire de préférences dont les valeurs persistent entre les visites :

Exemple :   📋 Copier le code

// Sauvegarder les préférences
function sauvegarderPreferences() {
  const prefs = {
    theme: document.getElementById('theme').value,
    langue: document.getElementById('langue').value,
    taillePolice: document.getElementById('taille').value
  };
  localStorage.setItem('preferences', JSON.stringify(prefs));
}

// Charger les préférences au démarrage de la page
function chargerPreferences() {
  const data = localStorage.getItem('preferences');
  if (!data) return; // rien à charger

  const prefs = JSON.parse(data);
  document.getElementById('theme').value = prefs.theme;
  document.getElementById('langue').value = prefs.langue;
  document.getElementById('taille').value = prefs.taillePolice;
}

// Appel au chargement de la page
window.addEventListener('load', chargerPreferences);

Détecter les changements depuis un autre onglet

Le navigateur déclenche automatiquement un événement storage lorsque localStorage est modifié depuis un autre onglet du même domaine. Pratique pour synchroniser l'état entre plusieurs fenêtres ouvertes :

Exemple :   📋 Copier le code

// Écouter les modifications depuis un autre onglet
window.addEventListener('storage', (event) => {
  console.log('Clé modifiée :', event.key);
  console.log('Ancienne valeur :', event.oldValue);
  console.log('Nouvelle valeur :', event.newValue);

  if (event.key === 'theme') {
    appliquerTheme(event.newValue);
  }
});

Limites et précautions

localStorage est pratique, mais il a des limites à connaître :

• Capacité : entre 5 et 10 Mo selon le navigateur. Suffisant pour des préférences, insuffisant pour des fichiers.
• Synchrone : les opérations bloquent le fil principal. Pour de gros volumes de données, préférez IndexedDB.
• Pas de sécurité : n'y stockez jamais de token d'authentification ni de données sensibles. Tout script JS de la page y a accès (risque XSS).
• Mode privé : certains navigateurs vident localStorage à la fermeture d'une session privée.

Parcourir toutes les clés stockées

Vous pouvez itérer sur toutes les clés de localStorage avec une boucle classique :

Exemple :   📋 Copier le code

// Afficher toutes les clés et valeurs stockées
for (let i = 0; i < localStorage.length; i++) {
  const cle = localStorage.key(i);
  const valeur = localStorage.getItem(cle);
  console.log(`${cle} : ${valeur}`);
}

localStorage vs sessionStorage vs cookies

Les trois mécanismes de stockage côté client répondent à des besoins différents :

• localStorage : données persistantes, sans expiration, accessibles sur tout le domaine.
• sessionStorage : données limitées à l'onglet ouvert, effacées à sa fermeture.
• Cookies : envoyés automatiquement au serveur, avec expiration paramétrable — utiles pour l'authentification.

Par carabde | Mis à jour le 17 avril 2026