把一刻保存下来

在“小小世界”互动壁纸的制作里，一个看似简单的愿望牵出了几个问题：修改寄语以后，关掉网页还在不在？换一台设备能不能继续？导出的图片会不会跟着时间变化？如果统统用一个“保存”回答，使用者很容易以为拿到了实际并不存在的能力。

先说清楚，究竟保存了什么

页面中正在编辑的文字是当前状态。将它写入浏览器存储，可以让同一个浏览器下次打开时恢复。把状态导出为文件，才有了用户自己能带走的备份。把画面导出为 PNG，则得到一张静态图片——它保存的是当时的文字与构图，不会继续随时间变化。

这几种方式可以同时存在，却不能互相代替。浏览器里的数据可能被清理；PNG 可以拿去设为壁纸，但无法还原完整的可编辑场景；结构化备份能恢复内容，却需要兼容的读取程序。小小世界因此将浏览器保存、JSON 备份与 PNG 导出分别呈现，也明确说明没有云端同步。

一个足够小的保存示例

下面的便签把问题缩小到一段文字。点击保存后刷新页面，检查是否恢复；再导出图片，看看可编辑的文字如何变成固定画面。它是为本文重新编写的示例，不是互动壁纸的完整实现。

实际写入的数据可以非常简单，但要留出版本信息，免得以后改了结构却误读旧数据：

const note = { version: 1, text: "留一点空白" };
try {
  localStorage.setItem("note:v1", JSON.stringify(note));
  showMessage("已保存在这台浏览器");
} catch {
  showMessage("没有保存成功，请另行备份");
}

失败也要有一句准确的话

浏览器不保证每次写入都成功。存储策略、容量限制和浏览器设置，都可能让写入失败。若程序只更新画面，再显示“已保存”，下次打开丢了内容，使用者无法知道问题在哪一步发生。

更可靠的顺序是：先尝试写入，确认没有抛出错误，再给出成功提示；失败时保留眼前的编辑内容，并提供可以带走的替代结果。恢复数据时也检查版本和类型，不把任意字符串当作有效状态。

这一做法没有让存储变得永远可靠，但让能力、失败和补救方式都更容易理解。小工具往往不需要更多按钮，只需要把已有按钮的承诺说准确。