用原生HTML+JS实现可增删待办列表需三者配合：HTML提供输入框、按钮和任务容器；JS监听提交事件、动态创建带data-id的li元素并绑定删除/完成事件；localStorage以JSON字符串形式存取含id/text/completed字段的数组，读取后渲染并同步checkbox状态，同时监听storage事件实现多标签页同步。
怎么用原生 HTML + JS 实现可增删的待办列表
纯静态 HTML 本身不能保存或操作数据，所以“任务管理页面”实际需要 HTML 结构 + JavaScript 行为 + 浏览器本地存储（localStorage）三者配合。不引入框架时，核心就是监听表单提交、动态创建 li 元素、绑定删除事件、并持久化到 localStorage。
常见错误是直接用 document.write 或反复 innerHTML = ... 覆盖整个列表——这会丢失已绑定的事件监听器，导致点不了删除按钮。
实操建议：
- 用
document.createElement('li')创建每一项，再用appendChild()追加，避免重绘丢失事件 - 给每个删除按钮设置
data-id属性（如data-id="3"），而不是依赖 DOM 位置索引，防止排序/过滤后错位 - 提交表单时调用
event.preventDefault()，否则页面会刷新清空所有状态 - 初始渲染列表时，先清空容器（
ul.innerHTML = ''），再遍历localStorage数据逐个追加，确保视图与数据一致
localStorage 存什么格式才不容易出 bug
存字符串没问题，但存对象必须 JSON.stringify()；取出来必须 JSON.parse()。直接存数组或对象会导致 localStorage.setItem('todos', todos) 把数组转成 "1,2,3" 这种逗号拼接字符串，后续 JSON.parse() 就报错 SyntaxError: Unexpected token 1 in JSON at position 0。
立即学习“前端免费学习笔记（深入）”；
正确做法是统一用数组结构，每项带 id、text、completed 字段：
const todos = [
{ id: 1, text: '写接口文档', completed: false },
{ id: 2, text: '修复登录态失效', completed: true }
];
存取逻辑要包裹异常处理：
- 读取时用
try/catch包住JSON.parse(localStorage.getItem('todos') || '[]') - 写入前先校验数据类型：
Array.isArray(todos) && todos.every(t => typeof t.text === 'string') - 不要用
localStorage.length判断是否有数据——它返回的是 key 的数量，不是 todo 条数
怎么让完成/未完成状态切换不卡顿且可回退
勾选 checkbox 触发状态更新时，如果每次都在 localStorage 里全量写入整个数组，小数据量没问题，但超过 200 条可能造成输入延迟（尤其低端安卓机）。更稳妥的做法是只更新单条：
- 给
input[type="checkbox"]绑定change事件，通过event.target.dataset.id找到对应项 - 用
findIndex定位，直接改todos[index].completed = event.target.checked，再localStorage.setItem('todos', JSON.stringify(todos)) - 不要在 checkbox 上用
onclick内联写法（如onclick="toggle(1)"），难以维护且容易闭包陷阱 - 如果用户快速连点两次，需防重复写入：可加个节流标记
if (isSaving) return; isSaving = true; setTimeout(() => isSaving = false, 300);
为什么刷新后 checkbox 状态和文字对不上
典型现象：页面刷新后，某项显示已完成，但 checkbox 没勾上；或者文字是“买咖啡”，但勾选框却是半透明灰色（indeterminate）。根本原因是 DOM 渲染顺序和数据同步没对齐。
关键点：
- 必须等
localStorage数据读取完成（异步！），再批量生成 DOM 元素，不能一边读一边 append - 创建 checkbox 时，显式设置
checkbox.checked = todo.completed，不能依赖默认值 - 如果用了
contenteditable做双击编辑，记得 blur 后才保存修改，否则失焦前的数据就丢了 - IE 不支持
localStorage在隐私模式下使用，会抛SecurityError，需兜底：try { localStorage.setItem(...) } catch(e) { console.warn('localStorage not available'); }
最常被忽略的是：没有监听 storage 事件。当多个标签页同时打开该页面时，一个页面改了数据，其他页面不会自动更新视图——得手动加 window.addEventListener('storage', reloadList)。
