JavaScript实现LocalStorage存储、回显及删除功能问题求助

嘿，我帮你排查出几个关键问题，咱们一步步修复，让你的Todo列表在页面刷新后能正常显示存储的内容：

1. 修复DOMContentLoaded事件拼写错误 #

你把页面加载事件名写成了DOMContendLoaded，正确的拼写是DOMContentLoaded（注意是Content不是Contend）。这个错误导致页面加载时，localStorageOnLoad函数根本不会被触发，自然无法从LocalStorage读取数据渲染到页面。

2. 修复localStorageOnLoad函数中的未定义变量 #

在这个函数里，你直接尝试把removeBtn添加到li上，但removeBtn并没有被创建。需要和添加新Todo时的逻辑一样，先创建删除按钮元素，再绑定到li上。

3. 调整newTodo函数中的元素添加顺序 #

你原本先把li插入到DOM，再给li添加删除按钮，虽然浏览器会动态更新，但逻辑上应该先完成li的所有内容（包括删除按钮），再把li插入到DOM中，这样更规范。

4. 补充删除Todo时同步更新LocalStorage的逻辑 #

原来的删除函数只移除了DOM中的元素，但LocalStorage里的数据还在，导致刷新后删除的项又会出现。需要在删除DOM元素的同时，从LocalStorage中移除对应的Todo。

修正后的完整JS代码 #

// VARIABLE
var todoList = document.getElementById("todoList");
var input = document.getElementById("todo");

//EVENT LISTENERS
eventListeners();

function eventListeners() {
  document.querySelector("#form").addEventListener('submit', newTodo);
  //Remove from the list
  todoList.addEventListener('click', removeTodo);
  //修复拼写错误：DOMContentLoaded
  document.addEventListener('DOMContentLoaded', localStorageOnLoad);
}

// 点击LI切换选中状态的逻辑
document.body.addEventListener("click", function(event) {
  if (event.target.nodeName === "LI") {
    event.target.classList.toggle("selected");
  }
});

//FUNCTIONS
function newTodo(e) {
  e.preventDefault();
  var todo = document.getElementById('todo').value;

  if (todo === '') {
    alert("Please add something!")
    return; // 为空时直接返回，不执行后续逻辑
  }

  //create the remove button
  var removeBtn = document.createElement('a');
  removeBtn.classList = "remove";
  removeBtn.textContent = 'X';

  //create an <li> element
  var li = document.createElement('li');
  li.textContent = todo;
  // 先把删除按钮加到li上
  li.appendChild(removeBtn);
  // 再把li加到todoList
  document.getElementById("todoList").appendChild(li);

  input.value = ""; // Clear out the input

  //Add to local storage
  addTodoLocalStorage(todo);
}

//remove todo list
function removeTodo(e) {
  if (e.target.classList.contains('remove')) {
    var todoText = e.target.parentElement.textContent.replace('X', '').trim();
    e.target.parentElement.remove();
    // 同步删除LocalStorage中的对应Todo
    removeTodoFromLocalStorage(todoText);
  }
}

function addTodoLocalStorage(todo) {
  var todos = getTodosFromStorage();
  todos.push(todo);
  localStorage.setItem('todos', JSON.stringify(todos));
}

function getTodosFromStorage() {
  var todos;
  var todosLS = localStorage.getItem('todos');
  if (todosLS === null) {
    todos = []
  } else {
    todos = JSON.parse(todosLS);
  }
  return todos;
}

// 新增：从LocalStorage删除指定Todo
function removeTodoFromLocalStorage(todoText) {
  var todos = getTodosFromStorage();
  // 过滤掉要删除的Todo
  todos = todos.filter(todo => todo.trim() !== todoText);
  localStorage.setItem('todos', JSON.stringify(todos));
}

//display from local storage
function localStorageOnLoad() {
  var todos = getTodosFromStorage();
  //looping through storage and display
  todos.forEach(function(todo) {
    //create an <li> element
    var li = document.createElement('li');
    li.textContent = todo;

    // 创建删除按钮（和newTodo逻辑一致）
    var removeBtn = document.createElement('a');
    removeBtn.classList = "remove";
    removeBtn.textContent = 'X';

    //Add remove button to li
    li.appendChild(removeBtn);
    //Add li to todoList
    todoList.appendChild(li);
  });
}

HTML代码（无需修改） #

<div class="container">
  <div class="row">
    <div class="col-lg-6 col-xs-12">
      <h3>What needs to be done?</h3>
      <form action="#" id="form">
        <input type="text" id="todo" class="inputBox" placeholder="Enter your new task here.."><br>
        <button id="add" class="btn btn-primary btn-lg btn-block">Add</button>
      </form>
    </div>
    <div class="col-lg-6 col-xs-12">
      <h2>My Todo List</h2>
      <div id="todoList" class="list"></div>
    </div>
  </div>
</div>

现在你可以测试一下：添加几个Todo，刷新页面，所有项都会正常显示；删除某个Todo，刷新后也不会再出现，完全符合你的需求。

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