DEV {JS}

Mode sombre

Stocker des données avec localStorage en JavaScript ​

❓Qu'est-ce que le localStorage ? ​

Le localStorage est une fonctionnalité intégrée aux navigateurs web qui permet de stocker des données localement, de manière persistante. Contrairement aux variables classiques, les données stockées dans le localStorage ne disparaissent pas quand on recharge la page ou ferme le navigateur.

🎛️ Caractéristiques principales ​

  • Stockage sous forme clé/valeur
  • Taille maximale ~5 Mo
  • Les données sont toujours de type chaîne de caractères string
  • Accessible uniquement depuis le même domaine (ex. devjs.ch ne peut pas accéder aux données de geekpower.com)

💡 Syntaxe de base ​

Ajouter une donnée ​

js
localStorage.setItem("prenom", "Alice");

Récupérer une donnée ​

js
const prenom = localStorage.getItem("prenom");
console.log(prenom); // "Alice"

Supprimer une clé ​

js
localStorage.removeItem("prenom");

Vider complètement le localStorage ​

js
localStorage.clear();

💾 Stocker des objets (avec JSON) ​

Le localStorage ne peut stocker que des chaînes de caractères. Pour enregistrer des objets ou des tableaux, on utilise JSON.stringify et JSON.parse.

Exemple ​

js
const utilisateur = {
  nom: "Dupont",
  age: 28
};

localStorage.setItem("utilisateur", JSON.stringify(utilisateur));

// Plus tard...
const data = JSON.parse(localStorage.getItem("utilisateur"));
console.log(data.nom); // "Dupont"

📦 Cas d’usage typiques ​

  • Sauvegarder un panier d’achat
  • Mémoriser un thème clair/sombre
  • Conserver une session locale
  • Garder des scores ou statistiques en local

⚠️ Limites et précautions ​

  • Le stockage est visible par l’utilisateur (accessible via F12 > Application)
  • Il peut être supprimé manuellement par le navigateur ou par l’utilisateur
  • Il ne doit pas être utilisé pour des données sensibles (ex. mot de passe)
  • Les données sont propres à chaque navigateur et à chaque domaine

✅ Bonnes pratiques ​

  • Toujours vérifier si une clé existe avant d’utiliser sa valeur :
js
const theme = localStorage.getItem("theme") || "clair";
  • Préférer JSON.stringify / JSON.parse pour toute structure complexe
  • Nettoyer régulièrement les données obsolètes

🧪 Tester en console ​

Tu peux tester localStorage directement dans la console du navigateur (F12 > Console) :

js
localStorage.setItem("test", "123");
console.log(localStorage.getItem("test"));
localStorage.removeItem("test");

🧠 À retenir ​

Le localStorage est un outil simple, puissant, et pratique pour conserver des données entre les sessions. Il est souvent utilisé dans les applications web modernes pour rendre l'expérience utilisateur plus fluide et personnalisée.

🔍 Visualiser et modifier les données dans le navigateur ​

Tous les navigateurs modernes (Chrome, Firefox, Edge…) permettent d’inspecter le localStorage via les outils développeur :

📂 Comment y accéder ? ​

  1. Ouvre ta page dans le navigateur
  2. Appuie sur F12 ou clic droit > "Inspecter"
  3. Va dans l’onglet Application (ou "Stockage" / "Storage")
  4. Dans la barre latérale gauche, cherche "Local Storage" puis clique sur ton domaine
  5. Tu verras une liste clé/valeur des données stockées

✏️ Ce que tu peux faire ​

  • Consulter les valeurs
  • Ajouter ou modifier manuellement une valeur
  • Supprimer une clé
  • Vider entièrement le localStorage

Cela te permet de tester et corriger plus facilement ton code sans devoir modifier les scripts ou relancer la page à chaque fois.