重新加载后保存复选框状态（TODO 列表）

Question

我是 JS 的新手，我真的需要你的帮助！ 我正在开发简单的待办事项列表应用程序。 我的 HTML 是

<div class="centerer">
    <div class="title">
        TODO List
    </div>
    <form>
        <label>
            <input id="new-task-input" type="text" placeholder="TODO">
        </label>
        <button type="button" id="add-task-button">
            Add
        </button>
    </form>
    <ul id="todolist-container">
        <li class="task">
            <label><input type="checkbox" class="checkbox">
                Default Test Value
                <input type="button" class="delete-btn" value="X">
            </label>
        </li>
    </ul>
    <input type="button" id="delete-all" value="Delete All" onclick="wantDelete()">

    <script type="text/template" id="list-item-template">
        <li class="task">
            <label>
                <input type="checkbox" class="checkbox">
                <span class="checkbox-custom"></span>
                <span class="task-name label"><!-- TODO --></span>
                <input type="button" class="delete-btn" value="X">
            </label>
        </li>
    </script>
    <script type="text/template" id="list-item-template-completed">
        <li class="task">
            <label>
                <input type="checkbox" class="checkbox">
                <span class="checkbox-custom"></span>
                <span class="task-name label completed"><!-- TODO --></span>
                <input type="button" class="delete-btn" value="X">
            </label>
        </li>
    </script>

复选框用“标签”帮助进行了一些修饰。

app的主要思想是： - 添加新的待办事项（可以） - 按“x”按钮删除待办事项（也可以） - 如果任务完成，在出现“复选框”线条装饰后（也可以） 所有信息也应该存储在本地存储中（也可以）。

但重新加载页面后，复选框的状态不会保存。只保存装饰状态。

我的JS是

    window.Todo = {
    addTaskButton: document.getElementById("add-task-button"),
    newTaskInput: document.getElementById("new-task-input"),
    container: document.getElementById("todolist-container"),
    template: document.getElementById("list-item-template").innerText,
    templateCompleted: document.getElementById("list-item-template-completed").innerText,

    setup: function() {
        Todo.addTaskButton.addEventListener('click', Todo.onAddTaskClicked);
        Todo.container.addEventListener('click', Todo.onTodolistClicked);
        Todo.renderTasks();
    },

    onAddTaskClicked: function() {
        var taskName = Todo.newTaskInput.value;
        Todo.newTaskInput.value = "";
        var taskHTML = Todo.template.replace("<!-- TODO -->", taskName);
        Todo.container.insertAdjacentHTML('afterbegin', taskHTML);
        Todo.saveTask(taskName, false);
    },

    onTodolistClicked: function(event) {
        var targetElement = event.toElement;
        if(targetElement.className !== "delete-btn"){
            while (!targetElement.classList.contains("task")) {
                targetElement = targetElement.parentElement;
            }

            var checkbox = targetElement.querySelector(".checkbox");
            var toLineThrough = targetElement.querySelector(".task-name");
            if (checkbox.checked) {
                toLineThrough.classList.add("completed");
            } else {
                toLineThrough.classList.remove("completed");
            }

            var taskNameElement = targetElement.querySelector(".task-name");
            var taskName = taskNameElement.innerText;


            Todo.saveTask(taskName, checkbox.checked);
        }
        else{
            while (!targetElement.classList.contains("task")) {
                targetElement = targetElement.parentElement;
            }

            var taskNameElement = targetElement.querySelector(".task-name");
            var taskName = taskNameElement.innerText;
            localStorage.removeItem(taskName);
            window.location.reload(true);
        }
    },

    saveTask: function(name, isCompleted) {
        window.localStorage.setItem(name, JSON.stringify(isCompleted));
    },

    renderTasks: function() {
        for (var i = 0; i < window.localStorage.length; i++) {
            var taskName = window.localStorage.key(i);
            var isCompleted = JSON.parse(window.localStorage.getItem(taskName)) === "true";
            var taskHTML = Todo.template.replace("<!-- TODO -->", taskName);

            if (!isCompleted) {
                Todo.container.insertAdjacentHTML('afterbegin', taskHTML);
            }
            else {
                var taskName1 = window.localStorage.key(i);
                var taskHTML1 = Todo.templateCompleted.replace("<!-- TODO -->", taskName1);
                Todo.container.insertAdjacentHTML('afterbegin', taskHTML1);
            }
        }
    }
}

    Todo.setup();

    function wantDelete() {
        localStorage.clear();
        window.location.reload(true);
    }

也许有人可以帮助如何保存复选框状态？ 而且我知道渲染功能不好，因为采用了 2 个不同的模板，但我的大脑可以重现这一点..

谢谢你的帮助！

Answer 1

我的建议是将特定字段的值保存到本地存储

localStorage.setItem('男', '真'); 阅读有关 Localstorage 的更多信息。