浏览器存储
Browser Storage
中级网页浏览器存储（Browser Storage）是网站把数据保存在用户浏览器中的能力，常见方式有 localStorage、sessionStorage 和 IndexedDB。它能让草稿、偏好等数据在刷新页面后仍可使用，减少重复输入和请求。
你可能会说：「我做的网页一刷新，没提交的内容就没了，能让它在这台设备上保留吗？」
读之前建议先了解
动手看看写文章时，草稿刷新后还在吗
为了比较三种方式，我们把同一份文章草稿分别存进 localStorage、sessionStorage 和 IndexedDB。
要点浏览器存储能帮你保存什么？
- 1
数据留在当前浏览器里
你在 AI 工具里写了一半提示词，可以先存到浏览器，刷新后再读出来。数据不会因此自动同步到另一台设备；用户清理网站数据，或换个浏览器，也可能找不回来。
- 2
按数据用途选择存储方式
localStorage 适合少量偏好设置，sessionStorage 适合只在当前标签页会话中使用的数据。要保存较多记录或结构化数据，可以考虑 IndexedDB。它们的读写方式不同，别只按名称选。
- 3
区分本地副本和正式数据
浏览器通常按网站来源隔离这些数据，但运行在页面中的脚本也可能读到它们。所以别把敏感密钥放进去；如果一条记录需要跨设备同步或由团队共享，就让服务端保存正式版本。
容易混淆的地方
浏览器存储和服务端数据库都能保存数据，区别在于数据主要落在哪里、谁能访问：前者留在用户的浏览器，适合本机草稿和偏好；后者适合跨设备同步、多人共享的正式记录。Cookie 也保存在浏览器里，但它可随匹配的请求发送给服务器，常用于会话等用途，不等同于 localStorage。
什么时候用
适合用
- 做在线编辑器时，暂存尚未提交的草稿，让用户刷新页面后能继续写。
- 记住当前设备上的界面偏好，例如侧栏是否展开、上次选的视图。
- 做离线可用的工具时，用 IndexedDB 保存需要在断网期间读取和修改的本地记录。
不适合用
- 订单、团队文档需要跨设备查看或多人协作时，把服务端数据库作为正式数据来源。
- 只想在组件显示期间记住弹窗是否打开，关闭页面后也无需保留时，用内存中的界面状态。
- 需要保存只能由服务端持有的 API 密钥时，放在服务端受控配置中，而不是浏览器存储。
练一练选一个答案，看看解释
你在做一个 AI 写作网站：用户希望刷新后找回未提交的草稿，但换设备后也要看到已发布文章。你会怎样设计？
让 AI 帮你做复制给 AI Agent 直接用
请为这个 AI 写作页面加入浏览器存储：在当前浏览器暂存未提交草稿，刷新后恢复，并提供清除草稿的入口。已发布文章仍通过服务端保存。请说明选用哪种浏览器存储、何时写入，以及用户清理网站数据后的表现。