On y est presque ! Un dernier effort.

La propriété Window.localStorage permet d’accéder à un objet local Storage.

Cet objet permet de stocker des données de type String dans le navigateur qui seront conservées lorsque le navigateur ou l’onglet est fermé.

LocalStorage permet de stocker uniquement des données String… Mais notre application manipule des objets !

On va donc devoir convertir nos objets au format String d’une part pour les sauvegarder.
Puis convertir les String stockées en objet Todo et Item pour pouvoir rétablir nos listes.

• Dans votre projet VSCode, dupliquer le répertoire v9-controls et nommer le v10-local-storage
• Dans le nouveau répertoire v10-local-storage :
  • Remplacer le code du fichier index.html avec celui-ci
  • Renommer le fichier v9-controls.js en v10-local-storage.js

Sauvegarde des listes

Comme notre application possède une interface découplée, on va pouvoir sauvegarder uniquement nos objets Todo et Item.

Même si sauvegarder les instances de ToDoDom pourrait paraitre plus simple, en réalité cela complexifierait le développement d’autres fonctionnalités, comme notamment le undo/redo, la synchronisation de nos listes avec une base de données, une autre interface utilisant une autre technologie que HTML/CSS, etc.

Sauvegarder uniquement les données, puis reconstruire l’interface au chargement de celles-ci, c’est the way to go.

Pour sauvegarder nos listes, créons une propriété statique lists, de type tableau, dans la classe ToDoDom.

À chaque création d’un objet ToDoDom, nous ajouterons l’objet ToDo dans le tableau lists, puis nous appellerons une fonction de sauvegarde save :

class ToDoDom {

    static count = 0;

    static lists = [];

    constructor(todo) {

        ...

        ToDoDom.lists.push(this.todo);

        this.save();
    }

    save() {
        localStorage.setItem("lists", JSON.stringify(ToDoDom.lists));
    }

    ...
}

• La fonction JSON.stringify(ToDoDom.lists) va transformer notre tableau d’objets ToDo lists en String au format JSON
• La fonction localStorage.setItem va sauvegarder cette String dans l’objet local

Désormais, si vous créez des listes et des items, vous devriez voir ce qui est sauvegardé dans le local storage, dans le DevTools :

Chargement des listes

Nos objets sont sauvegardés, il faut maintenant les charger lorsque le visiteur accès à la page.

Tout en en bas du fichier v10-local-storage.js, ajoutez le code suivant :

if (localStorage.getItem("lists")) {
    let lists = JSON.parse(localStorage.getItem("lists") || "[]");
    lists.forEach((list) => {
        let newTodo = new ToDo(list.name, list.items);
        let todoList = new ToDoDom(newTodo);
        let container = document.getElementById('lists-container');
        container.append(todoList.getHTML());
    });
}

• On test si le localStorage possède une clé “lists“
• let lists = JSON.parse(localStorage.getItem(“lists”) || “[]”);
  • localStorage.getItem récupère les données sauvegardées dans le localStorage (ou bien renvoie un tableau vide si rien n’est trouvé)
  • JSON.parse convertir la String au format JSON, qui est interprété comme un objet en Javascript
• lists.forEach((list) => {
  • effectue une boucle sur chaque élément (objet) de l’objet lists
  • à chaque tour de boucle, l’objet est placé dans une variable list
• new ToDo(list.name, list.items);
  • On instancie un nouvel objet Todo avec les informations stockées dans le localStorage
• Enfin, on instancie un objet de la classe ToDoDom avec notre objet ToDo fraichement créé
• Puis on ajoute l’objet ToDoDom container du DOM

Optionnellement, on peut mettre à jour le constructeur de notre classe Todo pour générer des objets Item plutôt que des objets génériques :

class ToDo {

    constructor(name = 'My todo list', items = []) {
        this.name = name;
        this.items = [];
        items.forEach( item => this.items.push( new Item(item.name, item.done) ) );
    }
...
}

Et voilà !

Vous pouvez rafraichir votre page, et vos listes sont toujours là.

Suppression du localStorage

Pour terminer, on peut ajouter la fonction suivante en fin de fichier, déclenchée par la bouton “Supprimer toutes les listes”, qui va vider le localStorage et recharger la page :

function purgeLocalStorage() {
    localStorage.clear();
    location.reload();
}

Conclusion

Ce n’était pas une mince affaire, mais nous avons effectué toutes les étapes du développement d’un projet HTML/CSS/Javascript.

Il faudra prendre du temps pour revoir toutes les versions et apprendre à savoir reproduire ce code sans aide ( si si, c’est possible! )

Bien sûr, cette application pourrait encore être améliorée; Mais si vous avez bien compris toutes ces étapes, vous êtes sur la bonne voie !