如何实现Chrome刷新后仍保留To-Do项目的待办数据？

你的ToDo项目在刷新后无法正确保留数据，核心原因是代码中存在数据同步不完整、函数参数未正确使用的问题，以下是具体问题和修复方案：

关键问题分析 #

1. createToDo函数未使用传入参数：加载localStorage数据时，你传入了单个待办项t，但函数内部还是访问全局data.text，导致渲染内容异常。
2. 删除/编辑后未更新localStorage：仅修改了DOM结构，未同步更新localStorage中的数据，刷新后旧数据会重新加载。
3. counter未从localStorage初始化：页面加载时counter默认设为0，未根据已保存的待办项数量赋值，导致空状态判断错误。
4. 完成状态未持久化：待办项的completed类状态未保存到localStorage，刷新后完成标记丢失。

修复后的JavaScript代码 #

let form = document.getElementById("todo-form");
let input = document.getElementById("input");
let msg = document.getElementById("msg");
let todos = document.getElementById("todos");
let noToDo = document.getElementById("notodo");
let counter = 0;

form.addEventListener("submit", e => {
  e.preventDefault();
  formValidation();
});

let formValidation = () => {
  if (input.value === "") {
    msg.innerHTML = "待办事项不能为空";
  } else {
    msg.innerHTML = "";
    acceptData();
  }
};

let data = [];

// 页面加载时从localStorage读取数据
document.addEventListener('DOMContentLoaded', () => {
  const ref = localStorage.getItem('todoItemsRef');
  if (ref) {
    data = JSON.parse(ref);
    counter = data.length;
    data.forEach(t => createToDo(t));
    counter > 0 ? hideNoToDo() : showNoToDo();
  }
});

let acceptData = () => {
  const newTodo = {
    text: input.value,
    completed: false
  };
  data = [...data, newTodo];
  input.value = "";
  updateLocalStorage();
  createToDo(newTodo);
  hideNoToDo();
};

// 修改createToDo，使用传入的待办项参数渲染
let createToDo = (todo) => {
  counter++;
  todos.innerHTML += `
    <div class="${todo.completed ? 'completed' : ''}">
      <p>${todo.text}</p>
      <span class="options">
        <i onClick="toggleCompleted(this)" class='bx bx-check-circle'></i>
        <i onClick="editToDo(this)" class='bx bx-edit-alt'></i>
        <i onClick="deleteToDo(this)" class='bx bx-trash'></i>
      </span>
    </div>
  `;
};

// 同步更新完成状态到数据和localStorage
let toggleCompleted = (e) => {
  const todoElement = e.parentElement.parentElement;
  todoElement.classList.toggle('completed');
  const todoText = todoElement.querySelector('p').textContent;
  const todoIndex = data.findIndex(item => item.text === todoText);
  if (todoIndex !== -1) {
    data[todoIndex].completed = !data[todoIndex].completed;
    updateLocalStorage();
  }
};

let deleteToDo = (e) => {
  const todoElement = e.parentElement.parentElement;
  const todoText = todoElement.querySelector('p').textContent;
  data = data.filter(item => item.text !== todoText);
  updateLocalStorage();
  todoElement.remove();

  counter--;
  counter === 0 ? showNoToDo() : hideNoToDo();
};

let editToDo = (e) => {
  const todoElement = e.parentElement.parentElement;
  const todoText = todoElement.querySelector('p').textContent;
  input.value = todoText;
  data = data.filter(item => item.text !== todoText);
  updateLocalStorage();
  todoElement.remove();

  counter--;
  counter === 0 ? showNoToDo() : hideNoToDo();
};

let hideNoToDo = () => {
  noToDo.classList.add('hidden');
  form.classList.remove('form-reg-position');
};

let showNoToDo = () => {
  noToDo.classList.remove('hidden');
  form.classList.add('form-reg-position');
};

// 封装localStorage更新逻辑，避免重复代码
let updateLocalStorage = () => {
  localStorage.setItem('todoItemsRef', JSON.stringify(data));
};

主要修复点说明 #

• 给每个待办项添加completed字段，保存完成状态，渲染时根据该字段自动添加CSS类。
• 调整createToDo函数逻辑，使用传入的todo参数渲染内容，不再依赖全局data变量。
• 新增updateLocalStorage函数，在添加、删除、编辑、修改完成状态时同步更新localStorage。
• 页面加载时根据localStorage数据初始化counter，并自动判断空状态显示。
• 修改完成状态切换函数，同步更新data数组和localStorage中的状态值。

优化建议 #

• 待办项文本重复时，删除/编辑可能会误操作，建议给每个待办项生成唯一ID（比如Date.now()），通过ID定位数据更精准。
• 可优化输入框动画逻辑，确保有数据时始终显示输入框，提升用户体验。

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