如何用LocalStorage实现Todo列表页面刷新数据不丢失？求最简示例

要让Todo列表刷新后不丢失内容，核心就是利用浏览器自带的localStorage做持久化存储，最简实现思路很明确：

1. 存储格式处理：localStorage只能存字符串，所以把Todo数据放到JSON数组里，存的时候用JSON.stringify转成字符串，读的时候用JSON.parse转回数组。
2. 三个核心操作：
   • 添加Todo时，把新内容同步存进localStorage
   • 页面加载时，从localStorage读取数据并渲染到页面
   • 删除Todo时，同步从localStorage移除对应项

你的代码修改后的完整实现 #

先修正你代码里的小错误（比如事件名DOMcontentloaded拼写错误，正确是DOMContentLoaded），再补充缺失的存储、读取和删除同步逻辑：

const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");

// 修正事件名大小写
document.addEventListener("DOMContentLoaded", getTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);

function addTodo(event) {
  event.preventDefault();
  const todoText = todoInput.value.trim();
  if (!todoText) return; // 空内容不添加

  // 创建Todo元素
  const todoDiv = document.createElement("div");
  todoDiv.classList.add("todo");

  const newTodo = document.createElement("li");
  newTodo.innerText = todoText;
  newTodo.classList.add("todo-item");
  todoDiv.appendChild(newTodo);

  const completedButton = document.createElement("button");
  completedButton.innerHTML = '<i class="fas fa-check"></i>';
  completedButton.classList.add("complete-btn");
  todoDiv.appendChild(completedButton);

  const trashButton = document.createElement("button");
  trashButton.innerHTML = '<i class="fas fa-trash"></i>';
  trashButton.classList.add("trash-btn");
  todoDiv.appendChild(trashButton);

  todoList.appendChild(todoDiv);
  todoInput.value = "";

  // 保存到localStorage
  saveLocalTodos(todoText);
}

function deleteCheck(e) {
  const item = e.target;
  const todo = item.parentElement;
  const todoText = todo.querySelector(".todo-item").innerText;

  if (item.classList[0] === "trash-btn") {
    todo.classList.add("fall");
    todo.addEventListener("transitionend", function() {
      todo.remove();
      // 同步删除localStorage里的对应项
      removeLocalTodo(todoText);
    });
  }

  if (item.classList[0] === "complete-btn") {
    todo.classList.toggle("completed");
    // 可选：如果要保存完成状态，这里可以更新localStorage（参考下方说明）
  }
}

// 从localStorage读取Todo并渲染到页面
function getTodos() {
  // 读取本地数据，没有的话初始化空数组
  const todos = JSON.parse(localStorage.getItem("todos")) || [];
  todos.forEach(todoText => {
    // 复用添加Todo的逻辑渲染已有内容
    const todoDiv = document.createElement("div");
    todoDiv.classList.add("todo");

    const newTodo = document.createElement("li");
    newTodo.innerText = todoText;
    newTodo.classList.add("todo-item");
    todoDiv.appendChild(newTodo);

    const completedButton = document.createElement("button");
    completedButton.innerHTML = '<i class="fas fa-check"></i>';
    completedButton.classList.add("complete-btn");
    todoDiv.appendChild(completedButton);

    const trashButton = document.createElement("button");
    trashButton.innerHTML = '<i class="fas fa-trash"></i>';
    trashButton.classList.add("trash-btn");
    todoDiv.appendChild(trashButton);

    todoList.appendChild(todoDiv);
  });
}

// 保存单个Todo到localStorage
function saveLocalTodos(todoText) {
  const todos = JSON.parse(localStorage.getItem("todos")) || [];
  todos.push(todoText);
  localStorage.setItem("todos", JSON.stringify(todos));
}

// 从localStorage删除指定Todo
function removeLocalTodo(todoText) {
  const todos = JSON.parse(localStorage.getItem("todos")) || [];
  // 找到对应Todo的索引并删除
  const index = todos.indexOf(todoText);
  if (index > -1) {
    todos.splice(index, 1);
    localStorage.setItem("todos", JSON.stringify(todos));
  }
}

额外补充（可选） #

如果需要保存Todo的完成状态，只需要把存储的数组改成对象格式（比如每个项是{text: '待办内容', completed: false}），对应的读取、保存函数也要做调整，比如：

• 保存时存对象而不是字符串
• 渲染时根据completed值给元素加completed类
• 切换完成状态时同步更新localStorage里的对应项

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