项目：简易记账页——页面第一次学会「记住」
项目库第 6 个：记一笔、存下来、算余额，数据存在浏览器本机。跟做约 60 分钟，是项目库的毕业项目。
项目库第 6 个项目，也是当前的毕业项目：页面第一次学会「记住」。记一笔零花钱，刷新页面、关掉再开——它还在。秘密是浏览器的 localStorage，理解它你就理解了「数据存在哪」的一半（另一半见数据存在哪）。
成品长什么样
页面结构：余额大数字 → 记一笔表单（说明 / 类型 / 金额）→ 账目列表 → 数据边界说明。参考成品在 examples/expense-tracker/reference.html，双击打开记两笔，然后关掉页面再打开——账还在。
第一步：复制这份需求说明
帮我做一个零花钱记账页面，只给我自己用，手机为主。
包含：
1. 顶部一个「当前余额」大数字；
2. 记一笔表单：这笔钱是什么（文字）、类型（收入/支出 二选一）、金额（数字，大于 0）；
3. 点「记一笔」：三项都填了才记录；记录显示在列表里，收入绿色带 +，支出橙色带 −；
4. 余额自动等于所有收入减去所有支出；
5. 数据保存在浏览器 localStorage 里，刷新、关闭再打开都不丢；
6. 一条账目都没有时，列表显示「还没有记录」，不要空白。
如实说明：数据只存在本机浏览器，换电脑或清浏览器数据会丢失——页面上要写明。
怎么算做好：记两笔（一收一支）后余额正确；关掉页面重开记录还在；清空 localStorage 后显示「还没有记录」。操作步骤
- 建项目文件夹：
expense-tracker。 - 发需求：把改好的整段发给 AI。
- 走一遍完整用户旅程：记一笔收入 → 记一笔支出 → 看余额对不对 → 刷新页面 → 关掉重开 → 清 localStorage（开发者工具里删）再看空状态。六个节点逐个验收。
- 故意记错一笔：金额填 0、说明留空、全是空格——三个错误的提示都应该友好明确（这是报名表单页练过的校验）。
- 想清楚边界再升级：「多设备同步」「导出 Excel」都需要后端——先读数据存在哪和前端与后端，知道哪些能在本机做、哪些不能，再决定要不要继续。
成功检查
- 记一收一支两笔后，余额数字正确（收入 − 支出）
- 刷新页面、关掉再打开，记录和余额都还在
- 开发者工具清除 localStorage 后，显示「还没有记录」，余额归零
- 空说明、零金额、负金额三种错误输入都有友好提示
- 页面上写明了「数据只存在本机、会丢失」
常见卡点
- 刷新后数据没了：九成是只 push 进了数组、没写回 localStorage——用模板四发：「记完刷新就丢。检查提交后有没有把最新列表写回 localStorage」。
- 余额出现 0.30000000004：浮点精度问题——「金额计算保留两位小数」一句话修掉。
- 换浏览器看不到旧账：这不是 bug，是 localStorage 的定义——它只属于「这台电脑的这个浏览器」，向 AI 确认这一点，并对照数据存在哪。