JavaScript待办列表：新输入内容无法保存到localStorage求助

问题详情 #

我开发了一个待办列表表单，需求如下：

• 用户可输入待办事项并展示
• 支持删除、划掉每项待办
• 刷新页面后localStorage需保留用户输入的待办项

目前首次加载能读取localStorage中保存的内容，但清空控制台后，新输入的内容无法保存到localStorage，每次输入都不生效。

现有代码 #

const form = document.querySelector("form");
// const li = document.querySelector("li");
const ul = document.querySelector("#todolist");
const input = document.querySelector("#TO-DO");
let todoArray;


if (localStorage.todos) {
  todoArray = JSON.parse(localStorage.todos);
} else {
  todoArray = [];
}

for (let todo of todoArray) {
  addTodo(todo);
}

function addTodo(userInput) {
  const newToDo = document.createElement("li");

  newToDo.innerText = userInput;
  ul.appendChild(newToDo);
  newToDo.addEventListener("click", function (e) {
    if (e.target.tagName === "LI") {
      newToDo.classList.toggle("completed");
    }
  });
  const removeBtn = document.createElement("button");
  removeBtn.innerText = "REMOVE";
  removeBtn.addEventListener("click", function () {
    removeBtn.parentElement.remove();
    removeFromLocalStorage(userInput);
  });
  newToDo.prepend(removeBtn);
}

const userInput = input.value;

ul.addEventListener("click", function (e) {
  
  if (e.target.tagName === "BUTTON") {
    e.target.parentElement.remove();
  } else if (e.target.tagName === "LI") {
  }
});

form.addEventListener("submit", function submit(e) {
  e.preventDefault();

  const newToDo = document.createElement("li");
  const removeBtn = document.createElement("button");
  const userInput = input.value;
  

  removeBtn.innerText = "REMOVE";
  removeBtn.addEventListener("click", function () {
    removeBtn.parentElement.remove();
  });

  newToDo.innerText = userInput;
  input.value =
    ""; /* resetting the input value to be empty after we retieve value */
  ul.append(newToDo);
  newToDo.appendChild(removeBtn);
  newToDo.addEventListener("click", function (e) {
    if (e.target.tagName === "LI") {
      //   console.log("YOU CLICKed lI");
      newToDo.classList.toggle("completed");
    }
  });
});

function addToLocalStorage(userInput) {
  todoArray.push(userInput);
  localStorage.setItem("todos", JSON.stringify(todoArray));
}

function removeFromLocalStorage(userInput) {
  for (let i = 0; i < todoArray.length; i++) {
    if (todoArray[i] === userInput) {
      todoArray.splice(i, 1);
      break;
    }
  }
  localStorage.setItem("todos", JSON.stringify(todoArray));
}

问题原因与修复方案 #

核心问题 #

你已经定义了addToLocalStorage函数，但在表单提交的逻辑里从未调用过这个函数，导致新添加的待办项根本没被存入localStorage。另外，表单提交时重复编写了创建元素的逻辑，完全可以复用已有的addTodo函数来减少冗余。

修复后的代码 #

const form = document.querySelector("form");
const ul = document.querySelector("#todolist");
const input = document.querySelector("#TO-DO");
let todoArray;

// 初始化localStorage数据
if (localStorage.todos) {
  todoArray = JSON.parse(localStorage.todos);
} else {
  todoArray = [];
}

// 渲染已保存的待办项
for (let todo of todoArray) {
  addTodo(todo);
}

// 统一创建待办项的函数
function addTodo(userInput) {
  const newToDo = document.createElement("li");
  newToDo.innerText = userInput;
  ul.appendChild(newToDo);

  // 划掉待办的逻辑
  newToDo.addEventListener("click", function (e) {
    if (e.target.tagName === "LI") {
      newToDo.classList.toggle("completed");
    }
  });

  // 删除按钮逻辑
  const removeBtn = document.createElement("button");
  removeBtn.innerText = "REMOVE";
  removeBtn.addEventListener("click", function () {
    newToDo.remove();
    removeFromLocalStorage(userInput);
  });
  newToDo.prepend(removeBtn);
}

// 表单提交逻辑
form.addEventListener("submit", function (e) {
  e.preventDefault();
  const userInput = input.value.trim(); // 去除首尾空格，避免空项

  if (userInput) { // 空内容不添加
    addTodo(userInput);
    addToLocalStorage(userInput); // 调用保存函数存入localStorage
    input.value = ""; // 清空输入框
  }
});

// 添加到localStorage
function addToLocalStorage(userInput) {
  todoArray.push(userInput);
  localStorage.setItem("todos", JSON.stringify(todoArray));
}

// 从localStorage删除
function removeFromLocalStorage(userInput) {
  todoArray = todoArray.filter(item => item !== userInput); // 用filter简化删除逻辑
  localStorage.setItem("todos", JSON.stringify(todoArray));
}

关键修复点 #

1. 调用addToLocalStorage：表单提交时，获取输入值后立即调用该函数，把新待办项同步存入数组和localStorage
2. 复用addTodo函数：表单提交时不再重复创建元素，直接调用已有的addTodo，减少代码冗余
3. 增加空值判断：通过trim()和非空校验，避免用户提交空的待办项
4. 简化删除逻辑：用filter替代for循环删除数组元素，代码更简洁易读
5. 移除冗余事件监听：删除ul上重复的点击监听，因为addTodo里已经给每个li和按钮绑定了对应事件

内容的提问来源于stack exchange，提问作者Antrhopos