如何在JavaScript待办清单中保存Checkbox状态到LocalStorage并刷新恢复

核心问题是你当前的待办数组只存在浏览器内存中，页面刷新后内存数据会被清空，必须用localStorage做前端数据持久化，这是基础JS实现这类需求的最优方案。

具体实现步骤： #

1. 初始化数据时从localStorage读取
   页面加载时，先尝试从localStorage获取保存的待办数据，没有的话再用默认空数组：

   // 初始化待办列表，优先读取本地存储
   let todos = JSON.parse(localStorage.getItem('todos')) || [];
   

2. 渲染Checkbox时基于持久化数据
   遍历todos数组渲染待办项时，直接用数组中对应项的check字段设置checkbox的checked属性，确保渲染源是持久化后的数组。

3. 修改状态后立刻同步到localStorage
   在checkbox的change事件中，更新数组的check字段后，必须把整个数组重新存入localStorage，这样修改才能被保存：

   // 假设你的checkbox绑定了change事件，index是当前待办项的索引
   checkbox.addEventListener('change', function() {
     todos[index].check = this.checked;
     // 将数组转为字符串存入localStorage（仅支持字符串存储）
     localStorage.setItem('todos', JSON.stringify(todos));
   });
   

4. 新增/删除待办项也要同步存储
   不管是新增待办还是删除待办，只要todos数组发生变化，都要执行localStorage.setItem('todos', JSON.stringify(todos))，保证本地存储和内存数组一致。

完整示例代码 #

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 初始化数据
  let todos = JSON.parse(localStorage.getItem('todos')) || [];
  const todoList = document.getElementById('todo-list');
  const addBtn = document.getElementById('add-btn');
  const todoInput = document.getElementById('todo-input');

  // 渲染待办列表
  function renderTodos() {
    todoList.innerHTML = '';
    todos.forEach((todo, index) => {
      const li = document.createElement('li');
      
      // 创建checkbox
      const checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.checked = todo.check;
      
      // 绑定状态变更事件
      checkbox.addEventListener('change', () => {
        todos[index].check = checkbox.checked;
        localStorage.setItem('todos', JSON.stringify(todos));
        // 可选：勾选后给文本加删除线
        textSpan.style.textDecoration = todo.check ? 'line-through' : 'none';
      });

      // 创建待办文本
      const textSpan = document.createElement('span');
      textSpan.textContent = todo.content;
      textSpan.style.textDecoration = todo.check ? 'line-through' : 'none';

      // 创建删除按钮
      const deleteBtn = document.createElement('button');
      deleteBtn.textContent = '删除';
      deleteBtn.addEventListener('click', () => {
        todos.splice(index, 1);
        localStorage.setItem('todos', JSON.stringify(todos));
        renderTodos();
      });

      // 组装元素
      li.appendChild(checkbox);
      li.appendChild(textSpan);
      li.appendChild(deleteBtn);
      todoList.appendChild(li);
    });
  }

  // 新增待办逻辑
  addBtn.addEventListener('click', () => {
    const content = todoInput.value.trim();
    if (content) {
      todos.push({ content, check: false });
      localStorage.setItem('todos', JSON.stringify(todos));
      todoInput.value = '';
      renderTodos();
    }
  });

  // 首次渲染
  renderTodos();
});

注意事项 #

• localStorage只能存储字符串类型，所以要用JSON.stringify()把数组转成字符串，读取时用JSON.parse()转成数组。
• 如果待办项有更多字段（比如创建时间、ID），只要把完整的对象存入数组即可，localStorage会一并保存。

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