Node.contains类型错误及Todo勾选状态localStorage持久化问题

一、修复TypeError错误 #

错误根源是Node.contains()方法要求传入Node对象，但你传了字符串"check"，完全用错了API。要判断点击区域是否属于带.check类的元素，直接用closest()方法就行：

把原来的判断代码：

if (e.target.contains("check")) {

改成：

const checkElement = e.target.closest(".check");
if (checkElement) {

这样就能正确识别点击的是勾选按钮区域了。

二、实现勾选状态持久化 #

你现在只存了todoList，但没在点击勾选时更新对应项的完成状态，也没在页面渲染时从localStorage读取状态恢复样式，所以刷新后状态会重置。

1. 点击勾选时同步更新todoList #

在切换checked类的同时，找到对应id的todo项，修改它的completed属性：

if (checkElement) {
  const li = checkElement.closest("li");
  li.classList.toggle("checked");
  // 找到对应todo项并更新状态
  const todoId = li.getAttribute("id");
  const todoItem = todoList.find(item => item.id == todoId);
  if (todoItem) {
    todoItem.completed = !todoItem.completed;
    localStorage.setItem("todoList", JSON.stringify(todoList));
  }
}

2. 页面初始化时恢复状态 #

渲染每个todo的li元素时，从localStorage读取todoList，根据每个todo的completed属性给li添加checked类：

// 假设你有渲染todo的循环代码
todoList.forEach(todo => {
  const li = document.createElement("li");
  li.setAttribute("id", todo.id);
  // 根据completed状态添加类
  if (todo.completed) {
    li.classList.add("checked");
  }
  li.innerHTML += icon; // 你的图标代码
  todoUl.appendChild(li);
});

完整修改后的点击事件代码 #

todoUl.addEventListener("click", (e) => {
  const idAttr = e.target.closest("li")?.getAttribute("id");
  if (!idAttr) return; // 防止点击区域不在li内报错

  const checkElement = e.target.closest(".check");
  if (checkElement) {
    const li = checkElement.closest("li");
    li.classList.toggle("checked");
    // 更新todoList对应项状态
    const todoItem = todoList.find(item => item.id == idAttr);
    if (todoItem) {
      todoItem.completed = !todoItem.completed;
      localStorage.setItem("todoList", JSON.stringify(todoList));
    }
  } else if (e.target.classList.contains("fa-trash")) {
    e.target.parentElement.remove();
    todoList = todoList.filter((todo) => todo.id != idAttr);
    localStorage.setItem("todoList", JSON.stringify(todoList));
  }
});

额外注意点 #

• 确保你的todoList每个项都有completed字段（初始值设为false），比如添加新todo时：

  const newTodo = {
    id: Date.now().toString(), // 示例id生成方式
    text: "新任务",
    completed: false
  };
  todoList.push(newTodo);
  localStorage.setItem("todoList", JSON.stringify(todoList));
  

• 页面加载时先从localStorage读取todoList，避免初始为空：

  let todoList = JSON.parse(localStorage.getItem("todoList")) || [];
  

内容的提问来源于stack exchange，提问作者Eren Elmacı