为什么本地存储会删除带有切换复选框的数据？

Question

我正在尝试列一个待办事项清单。我在处理过程中遇到以下问题：

我将待办事项从输入渲染到页面 - 工作正常。
我将待办事项保存在本地存储中 - 工作正常。
我从本地存储加载待办事项 - 工作正常，但是当我勾选待办事项上的复选框并刷新页面时，本地存储会删除该特定待办事项。无法弄清楚发生了什么

HTML:

<body>
    
<ul id="list">
    
</ul>

<form action="submit" id="task-form">
    <input type="text" placeholder="Type your task here and click 'Add a Task'" id="task-input">
    <button type="submit" id="add-button" > Add a Task </button>
</form>

<template id="template">
    <li class="list-item" data-todo-id="">
        <label class="list-item-label">
           <input type="checkbox" id="checkbox">
           <span list-item-text> Task text is here </span>
        </label>
           <button type="button"> Delete </button>
     </li>
</template>

</body>

JS:

let button = document.querySelector('#add-button')
let todoInput = document.querySelector('#task-input')
let template = document.querySelector('#template')
let list = document.querySelector('#list')
let LOCAL_STORAGE_PREFIX = 'TO-DO LIST APP'
let LOCAL_STORAGE_KEY = `${LOCAL_STORAGE_PREFIX}-todos`
let todos = [];
let savedTodos = loadTodo();
savedTodos.forEach(renderTodo)

button.addEventListener('click', e =>{
    e.preventDefault();

    let date = new Date;

    let todo = {
        name : todoInput.value,
        complete : false,
        id : date.valueOf() }

    todos.push(todo)
    saveTodo();
    renderTodo(todo)

    console.log(todo)
    todoInput.value = ''
})

function renderTodo(todoName){
    let templateClone = template.content.cloneNode(true)
    let todoText = templateClone.querySelector('[list-item-text]')
    todoText.innerText = todoName.name
    list.appendChild(templateClone)
}

function saveTodo(){
    localStorage.setItem(LOCAL_STORAGE_KEY,JSON.stringify(todos)) 
}

function loadTodo(){
   return JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) || [] 
}

Answer 1

该复选框没有附加任何事件处理程序，因此 checking/unchecking 它对待办事项没有影响。但是，您的代码中有一个错误，如果您添加一个新的，这将导致您之前保存的所有待办事项都被删除。复选框的东西，我相信是 co-incidence.

let todos = [];
let savedTodos = loadTodo();

此处正在创建两个不同的数组，savedTodos 包含从本地存储解析的待办事项列表。还有一个名为 todos 的空数组。 savedTodos 中的待办事项列表也被添加到下一行的 dom。

到目前为止一切顺利..

...
    todos.push(todo)
    saveTodo();
    renderTodo(todo)
...

但是，在您的 addTodo 函数（添加按钮事件处理程序）中，当您添加一个新的待办事项时，它会被添加到（当前为空）todos 数组中，然后也被写回到 local-storage。此时，现有待办事项将显示在 DOM 中，但已从 local-storage 中删除。刷新页面时，只会显示上次添加的待办事项。

要解决此问题，我建议合并 todos 和 savedTodos 数组，并且只使用其中之一。

...
let allTodos = loadTodo();
allTodos.forEach(renderTodo)

// in addTodo function (add button event handler)
   ...
   allTodos.push(todo);
   ...

// in saveTodo function 
   localStorage.setItem(LOCAL_STORAGE_KEY,JSON.stringify(allTodos));

为什么本地存储会删除带有切换复选框的数据？

Why local storage deletes data with toggled checkboxes?

html

javascript

local-storage