用纯前端 + localStorage 实现一个每日待办清单：从 0 到部署的完整实践

背景

本文记录一个纯前端「每日待办清单」小项目的完整实现：不依赖任何框架与后端，用原生 HTML/CSS/JS + localStorage 完成增删改查、双击编辑、实时统计与响应式适配，可直接双击运行，也可静态托管部署。

为什么用 localStorage

待办数据量小、结构简单（id / text / done 三个字段），以 JSON 数组持久化最轻量。读取放在页面初始化，写入放在每次状态变更之后，避免频繁 IO。

数据结构

每条待办为 id/text/done，整体以 key 为 todos 的 JSON 数组存储，id 用时间戳加随机数保证本地唯一。

核心逻辑

1. 添加：回车或点按钮，trim 后写入；
2. 切换完成：点击 checkbox 翻转 done；
3. 编辑：双击进入编辑，回车/失焦保存，Esc 取消；
4. 删除：按 id 过滤；
5. 清除已完成：过滤 done 为 true 的项；
6. 统计：底部实时显示总数与已完成数。

渲染策略

状态变更后全量重渲染：先清空列表容器，再按数组重建 DOM，同时更新空列表提示与统计。项目规模小，全量渲染足够快。

部署

纯静态、无需构建，可用 python3 -m http.server 8080 本地预览，也可托管到任意静态站点服务。