Étape 16 : JS - Persistance (LocalStorage) et Conclusion

Dernière étape ! Pour l’instant, si vous rafraîchissez la page, tout disparaît. C’est frustrant. Nous allons utiliser le localStorage du navigateur pour sauvegarder les données.

1. Sauvegarder et Charger

Dans la classe GestionnaireTaches, ajoutez ces deux méthodes :

    // Sauvegarder en JSON
    sauvegarder() {
        // localStorage ne stocke que du texte (string).
        // JSON.stringify transforme notre tableau d'objets en texte.
        localStorage.setItem('taches', JSON.stringify(this.taches));
    }

    // Charger au démarrage
    chargerTaches() {
        const data = localStorage.getItem('taches');
        if (data) {
            // JSON.parse fait l'inverse : texte -> objets JS
            this.taches = JSON.parse(data);
        }
    }

2. Appliquer la persistance

Il faut appeler sauvegarder() à chaque modification (ajouterTache, supprimerTache, toggleStatut).

Exemple :

    ajouterTache(titre, priorite) {
        // ... (code existant)
        this.taches = [...this.taches, nouvelleTache];
        this.sauvegarder(); // <--- AJOUT
    }

Et il faut appeler chargerTaches() au démarrage de l’app, dans le constructor.

    constructor() {
        this.taches = [];
        this.chargerTaches(); // <--- AJOUT
    }

3. Conclusion

Félicitations ! Vous avez construit une application “TaskMaster Pro” complète de A à Z.

Récapitulatif technique :

• HTML : Structure sémantique, formulaires, data-attributes.
• CSS : Variables, Flexbox, Grid, Animations, Responsive.
• JS : Programmation Orientée Objet (Class), Manipulation du DOM, Event Listeners, Array Methods (map, filter, reduce), LocalStorage.

Vous avez maintenant une base solide pour créer n’importe quelle application web moderne !

Défi Bonus : Essayez d’ajouter un bouton pour “Tout supprimer” ou d’éditer le titre d’une tâche existante (double-clic). Bon code !