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.

// 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") || "[]");

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") || "[]");

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

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

L'électricité est branchée

Félicitations. Votre bâtiment a une structure (HTML), une belle façade (CSS), et maintenant il est vivant (JavaScript). Les lumières s'allument, les portes s'ouvrent automatiquement, l'ascenseur fonctionne.

Vous avez les trois piliers du développement web front-end. En 8 leçons, vous avez appris à manipuler le DOM, réagir aux événements, communiquer avec des API, et sauvegarder des données.

La suite ? Le back-end — PHP, Python, ou Go — pour que votre bâtiment communique avec le monde extérieur. Les fondations sont solides. Continuez à construire.

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

The electricity is connected

Congratulations. Your building has a structure (HTML), a beautiful facade (CSS), and now it's alive (JavaScript). The lights turn on, doors open automatically, the elevator works.

You have the three pillars of front-end web development. In 8 lessons, you learned to manipulate the DOM, react to events, communicate with APIs, and save data.

What's next? The back-end — PHP, Python, or Go — so your building can communicate with the outside world. The foundations are solid. Keep building.

Commencer le cours PHP →

Start the PHP course →