LocalStorage and mini-project — JavaScript course

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.

// 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 vous utiliserez dans presque tous vos 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

Nous allons construire une todo list complète qui utilise tout ce que vous avez appris : DOM, événements, fonctions, tableaux, objets, localStorage. Testez l'éditeur ci-dessous !

localStorage — browser memory

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

// 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>

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

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

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

Vous maîtrisez maintenant les fondamentaux. Voici les sujets avancés à explorer ensuite :

ES Modules : organiser votre 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

Next step

Your mini-project works and persists data in the browser. Before leaving JavaScript, let's polish how you write it with the tools today's developers use. The next lesson explores modern JavaScript: destructuring and spread, for shorter, more readable code.

Lesson 9: Modern JavaScript →