Minimal Todo

一个极简、现代、响应式的 Todo 待办网页。它适合用作前端入门 Demo、小型个人任务清单，或纯原生 HTML/CSS/JavaScript 项目示例。

项目不需要登录、后端服务或数据库。所有任务都保存在当前浏览器的 localStorage 中，刷新页面后仍会保留。

功能特性

• 添加新的待办事项
• 在“未完成”和“已完成”之间切换任务状态
• 已完成任务显示绿色勾选、完成标签和删除线
• 删除单条任务
• 一键清除全部已完成任务
• 实时显示任务总数、完成数量和完成进度
• 使用浏览器本地存储自动保存数据
• 支持桌面端和移动端响应式布局
• 支持键盘操作、焦点提示和减少动画偏好
• 不依赖任何第三方前端框架或运行时库

技术栈

• HTML5
• CSS3
• 原生 JavaScript
• Node.js 原生 HTTP 模块（仅用于本地静态文件服务）
• Browser localStorage

项目结构

todo-web/
├── index.html    # 页面结构和 HTML 模板
├── styles.css    # 页面样式、状态样式和响应式布局
├── app.js        # Todo 状态管理、交互和本地存储
├── server.js     # 零依赖本地静态服务器
├── package.json  # 项目信息和运行命令
└── README.md     # 项目说明

安装与运行

环境要求

• 推荐使用 Node.js 18 或更高版本
• 支持 localStorage 的现代浏览器，例如 Chrome、Edge、Firefox 或 Safari

项目没有第三方依赖，因此不需要执行 npm install。

使用本地服务器运行

克隆项目并进入项目目录：

git clone <你的 GitHub 仓库地址>
cd todo-web

启动服务：

npm start

启动成功后终端会输出：

Todo app running at http://localhost:4173

在浏览器中访问 http://localhost:4173 即可使用。

如果 4173 端口已被占用，可以指定其他端口：

PORT=3000 npm start

Windows PowerShell：

$env:PORT=3000; npm start

直接打开页面

也可以直接双击 index.html，无需 Node.js 即可使用。

建议日常开发和测试时使用 npm start，以避免不同浏览器对 file:// 页面本地存储策略的差异。

使用方法

1. 在“有什么需要完成？”输入框中填写任务名称。
2. 点击“添加任务”，或在输入框中按 Enter。
3. 点击任务左侧的方形勾选按钮，将任务标记为已完成。
4. 再次点击勾选按钮，可以恢复为未完成状态。
5. 点击任务右侧的删除按钮，永久删除该任务。
6. 点击“清除已完成”，一次删除所有已完成任务。

输入条件

添加任务

条件	规则
输入类型	普通文本
最大长度	120 个字符，由输入框的 maxlength 限制
前后空白	提交时自动移除
空字符串	不会创建任务
仅包含空格	去除空格后视为空字符串，不会创建任务
重复名称	允许，不会自动合并或去重
特殊字符	允许；内容使用 textContent 渲染，不作为 HTML 执行
提交方式	点击“添加任务”或按 Enter

任务创建成功后会插入列表顶部，输入框会清空并重新获得焦点。每条任务会生成独立 ID，初始状态为“未完成”。

切换完成状态

输入是目标任务的当前 ID 和完成状态。每次点击勾选按钮时，完成状态会在以下两个值之间切换：

false → true
true  → false

删除任务

点击删除按钮后，当前任务会立即从列表和本地存储中移除。目前没有二次确认或撤销功能。

清除已完成任务

只有存在已完成任务时，“清除已完成”按钮才可用。操作会保留所有未完成任务，并删除全部 completed: true 的任务。

输出与界面状态

操作或状态	页面输出
没有任务	显示“一切就绪”的空状态
添加任务	新任务显示在列表顶部，状态为未完成
完成任务	显示绿色勾选、绿色“已完成”标签，并为任务名称添加删除线
恢复任务	移除完成标签和删除线，恢复未完成样式
删除任务	对应任务立即从列表消失，统计信息同步更新
清除已完成	所有已完成任务消失，未完成任务保持不变
统计信息	显示任务总数、已完成数量和完成进度条
刷新页面	从当前浏览器的本地存储恢复任务

完成进度的计算方式为：

完成进度 = 已完成任务数量 ÷ 任务总数 × 100%

界面中的进度值会四舍五入为整数。当任务总数为 0 时，完成进度为 0%。

本地数据格式

数据保存在当前页面来源对应的 localStorage 中，存储键为：

minimal-todo-items-v1

数据结构示例：

[
  {
    "id": "b50b719b-270a-4fa8-a5b8-b0ea3249831a",
    "title": "完成项目 README",
    "completed": false
  }
]

字段说明：

字段	类型	说明
id	string	任务的唯一标识
title	string	任务名称
completed	boolean	是否已完成

读取数据时，程序只接受包含有效 id、title 和 completed 字段的数组项。数据不存在、JSON 无法解析或格式不正确时，会回退为空任务列表。

浏览器禁止本地存储或存储空间不可用时，当前页面内的交互仍然可以使用，但刷新后数据可能无法恢复。

数据范围与隐私

• 数据不会发送到服务器或第三方服务。
• 不同浏览器、设备、浏览器用户配置和页面来源之间不会自动同步。
• 清除浏览器网站数据、无痕窗口关闭或手动删除对应的 localStorage 数据后，任务无法恢复。
• 通过 http://localhost:4173 和直接打开 file://.../index.html 产生的数据通常属于不同的存储来源，不会互相共享。

检查代码

可以运行以下命令检查 JavaScript 语法：

npm run check

该命令会检查 app.js 和 server.js，不会修改项目文件。

浏览器兼容性

项目面向现代浏览器开发。任务 ID 优先使用 crypto.randomUUID()；浏览器不支持该 API 时，会自动使用时间戳和随机数组合生成兼容 ID。

License

本项目采用 MIT License 开源许可证。