用HTML+JS实现记账本需结合localStorage：输入数据→JSON序列化存入→解析渲染；添加时preventDefault防刷新，用value获取表单值并校验NaN；日期用type="date"自动设当天，分类用select或radio；删除需重写数组，导出用Blob触发下载。
怎么用纯 HTML + JS 实现一个能存、删、查的记账本
纯 HTML 本身不能保存数据，所谓“HTML 记账本”实际是 HTML + JavaScript + 浏览器本地存储（localStorage） 的组合。不依赖服务器、不装环境，打开网页就能记，关掉再开也不丢数据——前提是用户没清空缓存或换设备。
核心逻辑就三步：输入 → 存进 localStorage → 渲染到页面。难点不在结构，而在数据格式设计和边界处理。
- 每次记一笔，建议存成对象：
{ id: Date.now(), date: "2024-06-15", type: "支出", category: "餐饮", amount: 28.5, note: "午饭" } -
localStorage只支持字符串，必须用JSON.stringify()存、JSON.parse()取，否则会静默失败 - 别直接用
localStorage.setItem("records", recordsArray)—— 这会报TypeError: Converting circular structure to JSON，因为数组里可能有函数或 DOM 引用（比如误把document.getElementById结果塞进去了）
为什么点击“添加”没反应？常见 DOM 操作错误
多数人卡在这一步：表单提交后页面刷新，刚输的数据没了；或者点了按钮，控制台报 Cannot read property 'value' of null。
- 表单默认行为是提交并刷新，必须在
submit事件里加event.preventDefault() - 获取输入框要用
document.getElementById("amount").value，不是.innerText或.innerHTML；空值时.value是空字符串，转数字会得NaN，得先trim()再判断 - 渲染列表别用
document.write()（已过时且会清空整个页面），改用document.getElementById("list").innerHTML = htmlString或更安全的appendChild()
怎么让收支分类可选、日期自动填当天
手动输日期容易错、分类写死难扩展，这两个细节直接影响日常使用意愿。
立即学习“前端免费学习笔记（深入）”；
- 日期字段设
<input type="date" id="date">，初始化时用 JS 填当天：document.getElementById("date").valueAsDate = new Date()（注意不是.value = new Date().toISOString().split("T")[0]，后者兼容性差） - 分类用
<select></select>，选项写死在 HTML 里即可，比如支出类：<option value="餐饮">餐饮</option>；但 JS 读取时要取selectElement.value，不是selectElement.textContent - 类型（收入/支出）建议用两个单选按钮：
<input type="radio" name="type" value="收入">，JS 获取时用document.querySelector('input[name="type"]:checked')?.value，带可选链防报错
localStorage 容量超了怎么办？怎么导出备份
localStorage 通常只有 5–10MB，对记账本够用，但长期不用清理会导致查找变慢、甚至写入失败（QuotaExceededError）。
- 每条记录尽量精简字段，别存图片 base64、大段富文本；删除功能必须真实调用
localStorage.removeItem()或重写整个数组 - 导出为 JSON 文件：构造 Blob +
URL.createObjectURL()+<a download="ledger.json"></a>，一行触发下载，用户点一下就保存到本地 - 导入时用
<input type="file">读取文件，FileReader.readAsText()解析内容，校验是否为数组、每项是否有id和amount字段，再合并或覆盖写入
真正麻烦的是数据冲突：比如用户在 A 电脑记了 3 笔，B 电脑记了 2 笔，又都导出导入一次，结果重复或覆盖。纯前端没法解决，这时候就得提醒用户——别跨设备混用，或者加个“最后修改时间”字段自己比对。
