AI 做的便签，换个浏览器就没了？加一个导出按钮，把数据带走

让 AI 写一个便签网页，现在已经不难。

能输入，能自动保存，刷新后文字还在。你开始往里面放学习笔记、常用命令、临时整理的资料。

直到某一天，你换了一个浏览器。

页面还是那个页面，便签却空了。

明明显示过"已保存"，内容到底保存在哪里？

这个问题，值得每个用 AI 做小工具的人弄清楚。

一、复制了网页文件，为什么没有复制走便签？

在之前的自动保存便签实战里，保存内容使用的是：

复制代码

localStorage.setItem(KEY, editor.value);

它将文字写入当前浏览器的本地存储。

你后来输入的便签，并没有因此写回 HTML 文件。

所以，把 note.html 复制到另一台电脑，只带走了工具的代码。使用工具产生的数据，还留在原来的浏览器中。

这就解释了一个容易误会的现象：

工具可以正常打开，但之前的记录没有跟着过来。

localStorage 按来源隔离；更换协议、主机名或端口，可能读到另一份存储。直接双击打开的 file: 页面，存储行为也没有统一保证。相关边界可以查看 MDN 文档。

对这个便签而言，"已保存到本浏览器"的含义很具体。要把内容带走，还需要一个导出入口。

二、发现便签空了，先检查这三件事

先别急着让 AI 重写整个项目。

1. 是否使用了原来的浏览器和用户配置？

同一台电脑上的不同浏览器，以及同一浏览器的不同用户配置，可能使用不同的数据空间。

先回到原来使用便签的环境查看。

2. 打开地址有没有变化？

例如，开发时经常见到这两个地址：

复制代码

http://localhost:8000/note.html
http://127.0.0.1:8000/note.html

它们虽然可能打开同一个文件，但主机名不同，对浏览器来说属于不同来源。

地址变了以后显示空白，并不能直接证明原来的数据被删除了。

先检查旧地址，可能就能找回来。

3. 是否清理过网站数据？

如果确实删除了原来的本地数据，又没有其他副本，这段便签程序本身无法把它恢复出来。

因此，我们要趁内容还在的时候，给工具增加一个简单功能：

把当前便签导出成 TXT 文件。

三、给原来的便签加一个"导出 TXT"按钮

下面的代码适用于前面链接中的第 5 课便签。

先在 HTML 中找到"立即保存"按钮：

复制代码

<button id="save-note" type="button">立即保存</button>

在它后面添加：

复制代码

<button id="export-note" type="button">导出 TXT</button>

然后，在原有 JavaScript 的最后一个 })(); 之前，加入下面的代码：

复制代码

const exportButton = document.querySelector("#export-note");

exportButton.addEventListener("click", () => {
  if (composing) {
    alert("请先确认输入法候选文字，再导出。");
    return;
  }

  try {
    const file = new Blob([editor.value], {
      type: "text/plain;charset=utf-8"
    });

    const url = URL.createObjectURL(file);
    const link = document.createElement("a");
    const stamp = new Date().toISOString().replace(/[:.]/g, "-");

    link.href = url;
    link.download = `便签备份-${stamp}.txt`;
    document.body.appendChild(link);

    link.click();
    link.remove();

    setTimeout(() => URL.revokeObjectURL(url), 60000);
  } catch (error) {
    alert("未能发起导出，请先手动复制便签内容。");
    console.error("便签导出失败：", error);
  }
});

这里使用了原程序已有的 editor 和 composing 变量，所以要放在原来的函数内部。

实现过程很直接：把文字装进 Blob，创建临时下载地址，再通过链接发起下载。相关接口见 MDN createObjectURL。

文件名里的时间采用 UTC，主要用于区分不同备份。

四、为什么导出输入框里的内容？

注意这一行：

复制代码

new Blob([editor.value], ...)

它读取的是你此刻在页面里看到的文字。

这是一个很小、却影响结果的选择。

原便签会在停止输入约半秒后自动保存。如果你刚刚输入了一句话就立即导出，本地存储里的内容可能还没有更新。

如果导出时再次读取 localStorage，就可能拿到上一版。

直接读取输入框，则能把当前内容放进备份文件，包括尚未自动保存的修改。

另外，这段导出代码：

保留换行和缩进。
不清空便签。
不修改原来的自动保存状态。
不需要先将文字上传到服务器。

本地保存暂时失败时，只要文字还在输入框里，你仍有机会将它导出。

五、换电脑以后，怎样恢复？

对于只有一段纯文本的便签，恢复过程可以很简单：

把导出的 TXT 文件带到另一台电脑。
用文本编辑器打开，确认内容完整。
打开便签网页，将文字粘贴进去。
等待页面显示"已保存到本浏览器"。
刷新页面，检查文字是否仍然存在。

如果目标便签里已经有其他内容，先把它导出，再决定如何合并。

暂时不必为了恢复一段文字，就急着增加自动导入、账号系统和云同步。先把这条最小恢复路径走通，工具就已经更实用了。

六、有了按钮，还要验证备份真的能用

点击"导出"只代表程序尝试发起下载。浏览器是否完成下载，需要实际检查；download 属性本身不能证明文件已经保存成功。MDN download 属性说明

可以用下面这份清单验收：

操作	应检查的结果
输入中文、英文和两行文字后导出	TXT 内容完整，换行保留
刚输入一句话就立即导出	文件包含最新一句话
导出后继续编辑	原来的自动保存仍正常
在另一个浏览器粘贴备份内容	保存、刷新后仍能恢复

测试时使用临时文字即可，不需要清除真实数据。

一次完整的备份验证，要走到"能重新恢复并继续使用"这一步。

另外，同一台电脑上的 TXT 可以应对浏览器数据丢失；如果还要应对电脑损坏，重要备份需要另存到你认可的其他设备或存储位置。

写在最后

用 AI 做小工具，很容易先关注界面、按钮和新功能。

但当你开始往里面放真实资料时，还有一个问题需要回答：

如果明天换设备、换浏览器，或者当前环境出了问题，我能把自己的数据带走吗？

对于一个便签，答案可以从一个"导出 TXT"按钮开始。

先保存一份，再实际恢复一次。

当这两步都能完成，你才真正掌握了这份记录的去向。