如何制作一个实用的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，但事件里还按旧索引删——就删错行。