如何制作一个实用的HTML Todo待办事项清单？

本文共计726个文字，预计阅读时间需要3分钟。

直接使用原生+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 和数组状态不一致——这些都不是语法问题，是状态流断点。