Practical Web App Patterns

Now let's add data persistence support by creating a classes/storage.js file with the following content:

import { TodoList, TodoItem } from "./classes.js";

const todoList = TodoList.getInstance();

export const LocalStorage = {
    load() {
        if (localStorage.getItem("todos")) {
            for (let t of JSON.parse(localStorage.getItem("todos"))) {
                todoList.add(new TodoItem(t.text));
            }
        }
    },
    save() {
        console.log(todoList.items);
        const array = Array.from(todoList.items);
        localStorage.setItem("todos", JSON.stringify(array));
    }
}
todoList.addObserver(LocalStorage.save);

Finally, back in app.js add a LocalStorage.load() call in the DOMContentLoaded event.