Enregistrer les tâches dans le navigateur

Vous ajoutez une tâche, puis vous actualisez la page : le tableau JavaScript repart de zéro. Pour éviter de perdre la liste, vous allez enregistrer ses données dans le navigateur et les relire au prochain chargement. Cette étape conserve les données ; la séparation du code en fichiers et le rendu complet de la liste seront approfondis dans les leçons suivantes.

Le tableau taches contient des objets avec les propriétés libelle et terminee. localStorage permet de conserver une chaîne de caractères dans le navigateur, même après la fermeture de la page. Comme un tableau JavaScript n’est pas enregistré tel quel, vous le convertissez d’abord en texte JSON avec JSON.stringify.

const taches = [
  { libelle: "Préparer le déjeuner", terminee: false },
  { libelle: "Lire les messages", terminee: true }
];

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

setItem reçoit une clé et une valeur. Ici, la clé taches identifie les données enregistrées ; la valeur est le texte JSON correspondant au tableau. Chaque fois que vous modifiez le tableau, vous devez enregistrer à nouveau son état pour que le navigateur dispose de la version la plus récente.

Au chargement de la page, getItem lit la valeur associée à la clé. Si vous n’avez encore rien enregistré, le résultat est null : vous devez alors commencer avec un tableau vide. Si une chaîne existe, JSON.parse la reconvertit en tableau et en objets JavaScript ; cette valeur initiale remplace l’ancien tableau vide de main.js.

const tachesEnregistrees = localStorage.getItem("taches");
const taches = tachesEnregistrees === null
  ? []
  : JSON.parse(tachesEnregistrees);

Dans votre gestionnaire, conservez l’écouteur submit déjà créé dans js/main.js. Remplacez la déclaration actuelle du tableau taches par le chargement ci-dessous, puis ajoutez l’appel à localStorage.setItem juste après l’ajout de l’objet au tableau. Le reste du traitement du formulaire, qui crée l’élément de liste et vide le champ, reste en place.

const tachesEnregistrees = localStorage.getItem("taches");
const taches = tachesEnregistrees === null
  ? []
  : JSON.parse(tachesEnregistrees);

const formulaire = document.querySelector(".taches-formulaire");
const champ = document.querySelector(".taches-formulaire__champ");
const liste = document.querySelector(".taches-liste");

formulaire.addEventListener("submit", function (evenement) {
  evenement.preventDefault();

  const libelle = champ.value.trim();
  if (libelle === "") {
    return;
  }

  const tache = { libelle: libelle, terminee: false };
  taches.push(tache);
  localStorage.setItem("taches", JSON.stringify(taches));

  const element = document.createElement("li");
  element.classList.add("taches-liste__element");
  element.textContent = formaterLibelle(tache);
  liste.append(element);
  champ.value = "";
});

L’appel à trim écarte les espaces placés au début ou à la fin du libellé, et le test évite d’ajouter une tâche vide. Après l’ajout au tableau, JSON.stringify(taches) produit la nouvelle chaîne à enregistrer. À la prochaine ouverture, les données reviennent dans taches ; l’affichage initial de toutes les tâches enregistrées sera organisé dans la leçon consacrée au rendu depuis les données.

Ajoutez une tâche dans la page, puis actualisez-la. Dans la console, exécutez la lecture suivante : vous devez retrouver un tableau d’objets contenant les mêmes libellés et états. La console du navigateur, déjà utilisée dans les premières leçons, permet aussi de contrôler cette valeur pendant vos essais.

JSON.parse(localStorage.getItem("taches"));

[{ libelle: "Préparer le déjeuner", terminee: false }]

• localStorage conserve une valeur texte dans le navigateur, associée à une clé.
• JSON.stringify transforme le tableau de tâches en chaîne enregistrable.
• JSON.parse reconstruit le tableau lorsque vous relisez cette chaîne.
• Si getItem renvoie null, initialisez les tâches avec un tableau vide.
• Après chaque ajout au tableau, sauvegardez son état mis à jour.

Dans la prochaine leçon, vous séparerez les responsabilités du gestionnaire en modules ES, sans changer le modèle des tâches ni la clé de stockage.