Question

我是JS的新手，我真的需要你的帮助！我正在研究简单的Todo列表应用程序。我的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的主要思想是： - 添加新Todo（好吧） - 按“x”按钮删除待办事项（也可以） - 如果任务完成，在“复选”后出现直线装饰（也很好）所有信息也应存储在localstorage中（也可以）。

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

我的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

localStorage.setItem（＆＃39; male＆＃39;，＆＃39; true＆＃39;）; 阅读更多关于Localstorage的信息。

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

1 个答案: