如何用JavaScript DOM修改待办列表：添加复选框并本地存储选中状态

1. 实时保存复选框状态到 localStorage #

给复选框绑定change事件，状态变更时将其存入本地存储，用todo的唯一ID作为键名，确保每个待办项的状态独立存储：

const checkbox = document.createElement('input'); 
checkbox.type = 'checkbox'; 
checkbox.id = todo.id; 
// 初始化时从localStorage读取历史状态
checkbox.checked = localStorage.getItem(`todo_${todo.id}_checked`) === 'true';
// 监听状态变化，同步到localStorage
checkbox.addEventListener('change', () => {
  localStorage.setItem(`todo_${todo.id}_checked`, checkbox.checked.toString());
});
element.appendChild(checkbox);

2. 重新渲染时恢复状态 #

无论页面刷新还是重新生成待办项DOM，创建复选框时都要从localStorage读取对应ID的状态，这样即使内存中的todo变量被移除后重建，选中状态也不会丢失。

3. 删除待办项时清理无效存储 #

删除todo时，同步清理localStorage中对应的状态记录，避免残留无效数据：

// 示例删除函数
function deleteTodo(todoId) {
  // 移除DOM元素
  const todoElement = document.getElementById(todoId)?.parentElement;
  if (todoElement) todoElement.remove();
  // 清理localStorage中的状态
  localStorage.removeItem(`todo_${todoId}_checked`);
}

核心注意点 #

• 利用todo的唯一ID作为存储键的一部分，避免不同待办项的状态冲突
• localStorage仅支持字符串存储，所以要将布尔值checked转为字符串后再存储
• 初始化复选框时必须主动读取本地存储的值，这是状态持久化的关键

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