LocalStorage et mini-projet · Cours JavaScript

localStorage : la mémoire du navigateur

localStorage permet de sauvegarder des données dans le navigateur de l'utilisateur. Les données persistent même après la fermeture du navigateur.

Prédisez avant de lire

On range un objet dans localStorage : localStorage.setItem("user", { nom: "Alice" }), puis on le relit : const u = localStorage.getItem("user"). Avant de dérouler : que vaut u ? Récupère-t-on l’objet d’origine ? Et si on fait localStorage.setItem("age", 25) puis getItem("age"), obtient-on un nombre ou une chaîne ?

Voir la réponse

u vaut la chaîne "[object Object]", pas l’objet { nom: "Alice" }. localStorage ne sait stocker que des chaînes de caractères : en lui passant un objet, JavaScript le convertit en chaîne via sa représentation par défaut, qui est "[object Object]" (l’objet est perdu). De même, getItem("age") après setItem("age", 25) renvoie la chaîne "25", pas le nombre 25. La bonne pratique : sérialiser avec JSON.stringify(objet) avant de stocker, et JSON.parse(chaine) après lecture pour reconstruire l’objet. C’est le piège n°1 de localStorage.

// Sauvegarder
localStorage.setItem("nom", "Alice");

// Lire
const nom = localStorage.getItem("nom"); // "Alice"

// Supprimer
localStorage.removeItem("nom");

// Tout effacer
localStorage.clear();

Attention : localStorage ne stocke que des chaînes de caractères. Pour stocker des objets ou des tableaux, utilisez JSON :

// Sauvegarder un tableau
const taches = ["Acheter du pain", "Coder", "Dormir"];
localStorage.setItem("taches", JSON.stringify(taches));

// Lire un tableau
const stockees = JSON.parse(localStorage.getItem("taches") || "[]");

Voir (et fouiller) son localStorage

Tes données ne sont pas invisibles : tu peux les voir, les modifier et les supprimer à la main, directement dans le navigateur. C'est super pratique pour déboguer (« est-ce que ma tâche est bien enregistrée ? »). Voici le chemin :

Ouvre les outils de développement : touche F12 (ou clic droit n'importe où → « Inspecter »).
Va dans l'onglet Application (sur Chrome et Edge ; il s'appelle Stockage sur Firefox).
Dans la colonne de gauche, déplie Local Storage et clique sur l'adresse de ton site.
La table de droite liste tes paires clé / valeur. Double-clique une valeur pour la modifier, ou sélectionne-la pour la supprimer.

Onglet Application → Local Storage → l'adresse de ton site : tes données y apparaissent en clair, en paires clé / valeur.

Encore plus rapide depuis l'onglet Console : tape localStorage puis Entrée pour voir tout l'objet, localStorage.getItem("todos") pour lire une clé, ou localStorage.clear() pour tout effacer d'un coup (pratique pour repartir de zéro pendant les tests).

Le pattern classique

Voici le schéma que tu utiliseras dans presque tous tes projets :

Charger les données au démarrage : JSON.parse(localStorage.getItem("key") || "[]")
Modifier les données en mémoire (ajouter, supprimer, mettre à jour)
Sauvegarder après chaque modification : localStorage.setItem("key", JSON.stringify(data))
Re-render l'affichage

Mini-projet : Todo List

On va construire une todo list complète qui utilise tout ce que tu as appris : DOM, événements, fonctions, tableaux, objets, localStorage. Teste l'éditeur ci-dessous !

localStorage — browser memory

localStorage lets you save data in the user's browser. Data persists even after closing the browser.

Predict before reading

We store an object in localStorage: localStorage.setItem("user", { name: "Alice" }), then read it back: const u = localStorage.getItem("user"). Before scrolling down: what is the value of u? Do we get the original object back? And if we do localStorage.setItem("age", 25) then getItem("age"), do we get a number or a string?

See the answer

u is the string "[object Object]", not the object { name: "Alice" }. localStorage can only store strings: when you pass an object, JavaScript converts it to a string using its default representation, which is "[object Object]" (the object is lost). Likewise, getItem("age") after setItem("age", 25) returns the string "25", not the number 25. Best practice: serialize with JSON.stringify(object) before storing, and JSON.parse(string) after reading to reconstruct the object. This is the number-one trap with localStorage.

// Save
localStorage.setItem("name", "Alice");

// Read
const name = localStorage.getItem("name"); // "Alice"

// Delete
localStorage.removeItem("name");

// Clear all
localStorage.clear();

Warning: localStorage only stores strings. To store objects or arrays, use JSON:

// Save an array
const tasks = ["Buy bread", "Code", "Sleep"];
localStorage.setItem("tasks", JSON.stringify(tasks));

// Read an array
const stored = JSON.parse(localStorage.getItem("tasks") || "[]");

Seeing (and poking at) your localStorage

Your data isn't invisible: you can see it, edit it and delete it by hand, right in the browser. It's very handy for debugging ("is my task actually saved?"). Here's the path:

Open the developer tools: the F12 key (or right-click anywhere → "Inspect").
Go to the Application tab (on Chrome and Edge; it's called Storage on Firefox).
In the left column, expand Local Storage and click your site's address.
The table on the right lists your key / value pairs. Double-click a value to edit it, or select it to delete it.

Application tab → Local Storage → your site's address: your data shows up in plain sight, as key / value pairs.

Even faster from the Console tab: type localStorage then Enter to see the whole object, localStorage.getItem("todos") to read one key, or localStorage.clear() to wipe everything at once (handy to start fresh during tests).

The classic pattern

Here's the pattern you'll use in almost every project:

Load data on startup: JSON.parse(localStorage.getItem("key") || "[]")
Modify data in memory (add, delete, update)
Save after each change: localStorage.setItem("key", JSON.stringify(data))
Re-render the display

Mini-project: Todo List

We'll build a complete todo list using everything you've learned: DOM, events, functions, arrays, objects, localStorage. Try the editor below!

Essayez vous-même

<h2>Ma Todo List</h2>
<form class="todo-form" id="todoForm">
  <input type="text" id="todoInput" placeholder="Ajouter une tâche...">
  <button type="submit">Ajouter</button>
</form>
<div id="todoList"></div>
<div class="todo-count" id="todoCount"></div>

function sauvegarder() {
    localStorage.setItem("todos", JSON.stringify(todos));
  }

function afficher() {
    const liste = document.getElementById("todoList");
    liste.innerHTML = "";

todos.forEach(function(todo, index) {
      const div = document.createElement("div");
      div.className = "todo-item" + (todo.fait ? " done" : "");

div.innerHTML =
        '<input type="checkbox"' + (todo.fait ? " checked" : "") + '>' +
        '<span>' + todo.texte + '</span>' +
        '<button title="Supprimer">×</button>';

// Cocher / décocher
      div.querySelector("input").addEventListener("change", function() {
        todos[index].fait = !todos[index].fait;
        sauvegarder();
        afficher();
      });

// Supprimer
      div.querySelector("button").addEventListener("click", function() {
        todos.splice(index, 1);
        sauvegarder();
        afficher();
      });

liste.appendChild(div);
    });

// Compteur
    const restantes = todos.filter(function(t) { return !t.fait; }).length;
    document.getElementById("todoCount").textContent =
      restantes + " tâche(s) restante(s) sur " + todos.length;
  }

// Ajouter une tâche
  document.getElementById("todoForm").addEventListener("submit", function(event) {
    event.preventDefault();
    const input = document.getElementById("todoInput");
    const texte = input.value.trim();
    if (!texte) return;

todos.push({ texte: texte, fait: false });
    sauvegarder();
    afficher();
    input.value = "";
    input.focus();
  });

// Affichage initial
  afficher();
</script>

🎯 Pratique

S'entraîner (clique pour ouvrir) :

✨ Prompt IA

Avec l'IA

Copiez ce prompt dans Claude ou ChatGPT :

Améliore cette todo list : ajoute un filtre (toutes / actives / terminées), un bouton "supprimer les terminées" et un drag & drop pour réordonner. Explique chaque ajout.

Exercice : Corrigez le code de l'IA

L'IA a oublié JSON.stringify() en sauvegardant un tableau dans localStorage. Corrigez la ligne de sauvegarde.

Corrigez le code

⚖️ Juge le code de l'IA

Accepter ou rejeter le code de l'IA

L'IA te propose cette fonction de chargement des tâches. Ton rôle de relecteur : l'accepter telle quelle ou la rejeter, et dire pourquoi.

function chargerTaches() {
  const brut = localStorage.getItem("todos");
  return JSON.parse(brut);
}

let todos = chargerTaches();
todos.forEach(afficherTache);

À rejeter. Au tout premier chargement, la clé « todos » n'existe pas encore : getItem renvoie null, et JSON.parse(null) renvoie null (pas un tableau). Le todos.forEach(...) qui suit plante alors avec « Cannot read properties of null ». Le réflexe vu en cours : un repli vide, JSON.parse(brut || "[]"), pour toujours obtenir un tableau, même au premier lancement.

🧠 Rappel libre

Rappel libre

Sans remonter dans la leçon : quel est le seul type de données que localStorage sait stocker, et quelles deux fonctions utilise-t-on pour y ranger puis relire un tableau ?

localStorage ne stocke que des chaînes de caractères (strings). Pour y ranger un tableau ou un objet, on le sérialise avec JSON.stringify(data) avant setItem ; pour le relire, on désérialise avec JSON.parse(localStorage.getItem("key") || "[]"), le || "[]" servant de repli quand la clé n'existe pas encore.

localStorage stocke les données sous forme de...

Objets JavaScript Nombres Chaînes de caractères (strings)

Comment sauvegarder un tableau dans localStorage ?

localStorage.setItem("key", monTableau) localStorage.setItem("key", JSON.stringify(monTableau)) localStorage.save("key", monTableau)

Que se passe-t-il si on ne fait pas JSON.stringify() avant de stocker un tableau ?

Le tableau est converti en texte "[object Object]" et les données sont perdues Ca fonctionne normalement Le navigateur refuse de stocker

Pour aller plus loin

Tu maîtrises maintenant les fondamentaux. Voici les sujets avancés à explorer ensuite :

ES Modules : organiser ton code en fichiers MDN
Classes : programmation orientée objet en JavaScript W3Schools
Destructuring : extraire des valeurs élégamment MDN
Spread operator (...) : copier et fusionner des tableaux/objets W3Schools
Web APIs : Geolocation, Canvas, WebSockets MDN

Références complètes : W3Schools JavaScript · MDN JavaScript

Going further

You now master the fundamentals. Here are advanced topics to explore next:

ES Modules — organize your code into files MDN
Classes — object-oriented programming in JavaScript W3Schools
Destructuring — extract values elegantly MDN
Spread operator (...) — copy and merge arrays/objects W3Schools
Web APIs — Geolocation, Canvas, WebSockets MDN

Full references: W3Schools JavaScript · MDN JavaScript

Prochaine étape

Votre mini-projet fonctionne et conserve les données dans le navigateur. Avant de quitter JavaScript, on polit votre écriture avec les outils des développeurs d'aujourd'hui. La prochaine leçon explore le JavaScript moderne : le destructuring et le spread, pour écrire un code plus court et plus lisible.

Leçon 9 : JavaScript moderne →