心心念许久。趁着这两天，自己手搓了一个HTML版的极简的单文件双栏树状笔记（界面见下图），权且叫 MiniPad 吧。

软件定位

纯前端实现的双栏树状笔记工具，数据自包含在 HTML 文件内，浏览器双击打开即用，零依赖，零安装。

文件结构

MiniPad.html ← 唯一文件（~11KB）

所有代码（HTML/CSS/JS）和数据（JSON）全部内嵌在一个 HTML 文件里。没有外部引用、没有 CDN、没有框架。

数据存储方案

数据以 JSON 格式存在 HTML 内部的<script type="application/json" id="treenote-data">块中<script type="application/json" id="treenote-data">[{"id":"root","title":"root","children":[...],"expanded":true}]</script>

写入方式

每次保存时，JS 用正则替换这个 JSON 块的内容，然后通过<a download="MemPad.html">  触发浏览器下载，用户手动覆盖原文件。

备份方式

localStorage 每 5 分钟自动存一份（mempad_auto key），防止意外关闭丢数据。下次打开检测到新备份会弹窗询问是否恢复。

核心功能技术拆解

性能表现

结论：浏览器环境下性能充裕，如果有瓶颈，就是在文件体积变大后，下载保存的等待时间可能会有所增长（但通常 < 1 秒）。

局限性（诚实说）

横向对比

适用场景

适囗合：需要跨平台（Win/Mac/Linux/手机）查看编辑笔记的人；不想装任何软件，浏览器就是全部；对数据格式有掌控欲（JSON 可读、可脚本处理）；笔记量在 2000 节点以内；临时环境（网吧、公用电脑）快速记东西；

不适合：需要真正的"原地保存"（必须走下载流程）；需要富文本排版；需要多人协作；笔记量极大（万节点以上）；

总结

这个 HTML 版 MemPad 的技术选型非常明确：用浏览器当运行时，用 HTML 文件当数据库容器。代价是保存体验不够完美（浏览器限制），换来的是：11KB 单文件、全平台可用、数据格式开放（JSON）、零部署成本。在"纯前端单文件应用"这个品类里，它是一个干净的实现范例——没有过度工程，每一行代码都有明确用途。