关键在于状态与dom严格同步：初始化用json.parse(localstorage.getitem('todos') || '[]')避免null报错，增删改后立即json.stringify存入localstorage；用data-id而非索引映射数据与dom，checkbox通过.checked属性双向绑定，渲染时显式设置checked值，change事件中更新数据并持久化。
直接用原生 HTML + JavaScript 就能做出功能完整、可持久化、无框架依赖的 Todo 清单，关键不是“怎么写”，而是「状态管理逻辑怎么不崩」和「DOM 更新怎么不漏掉」。
怎么用 localStorage 保存并恢复待办项
页面刷新后待办项消失，本质是没把数据落地。不能只靠 JS 数组存着，得同步到 localStorage；但要注意它只接受字符串，直接 localStorage.setItem('todos', todos) 会存成 object Object。
- 每次增删改后，必须调用
localStorage.setItem('todos', JSON.stringify(todos)) - 初始化时用
JSON.parse(localStorage.getItem('todos') || '[]')，避免null导致解析报错 - 别在
input事件里高频存——用blur或按钮提交触发保存更稳妥
怎么让勾选/删除操作准确作用于对应条目（不串行）
常见错误是给所有 li 绑定 click 时，用 querySelectorAll('.todo-item') 拿节点再遍历加事件，结果删掉第 2 条后，第 3 条的索引变成 2，但事件里还按旧索引删——就删错行。
- 推荐用事件委托：给
ul绑click，用e.target.closest('.todo-item')定位目标项 - 每条待办生成时，给其容器加唯一
data-id（比如用Date.now()或自增 id），删/改都基于这个 id 查找数组元素 - 不要依赖 DOM 顺序索引做数据操作，数组和 DOM 必须通过 id 映射，而不是位置对齐
input[type="checkbox"] 状态和数据怎么保持严格一致
用户点勾选框，JS 改了数组里的 completed 字段，但 DOM 上的 checkbox 没同步更新，或者反过来——典型是忘了双向绑定逻辑。
- 渲染列表时，每个 checkbox 的
checked属性必须显式设为item.completed，不能只靠初始 HTML 写死 - 监听 checkbox 的
change事件（不是click），拿到e.target.checked去更新对应 item 的completed字段 - 避免用
setAttribute('checked', true)，应直接操作checkbox.checked = true—— 前者只影响 HTML 属性，后者才真正控制控件状态
最易被忽略的是「输入框回车添加后焦点未清空+未移出」，会导致连续输两条内容只显示一条；还有删除全部已完成项后，忘记重绘列表导致 DOM 和数组状态不一致——这些都不是语法问题，是状态流断点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
