“保存了”到底保存到哪里

AI 很容易写出一个看起来能新增数据的页面，但刷新以后全没了。因为“页面现在能看到”不等于“已经持久保存”。

第一种：React state

const [messages, setMessages] = useState([])

适合：当前页面需要显示和更新的数据。

特点：

页面打开期间存在
刷新通常消失
换设备看不到
不适合当长期数据库

具体场景：用户输入框、弹窗是否打开、当前留言列表的页面副本。

第二种：浏览器 localStorage

localStorage.setItem('draft', '还没写完的留言')

适合：当前浏览器设备上的草稿、主题偏好、非敏感小数据。

特点：

刷新后仍可能存在
只在当前浏览器和设备
用户可以查看和修改
不能保存秘密
不适合多人共享核心数据

具体场景：未提交的留言草稿、深色模式偏好。

第三种：服务器内存

const messages = []

如果这段数组写在后端，多个请求可能暂时看到它，但服务重启、重新部署或换实例后会消失。

适合：短期缓存、开发演示、一次任务的临时状态。

不适合：正式用户留言、订单、账号数据。

第四种：数据库

适合结构化、需要查询和关联的数据：

用户
留言
项目
订单
权限
文件元数据

数据库可以按用户、时间、状态筛选，并用 ID 建立关系。

AI 留言板的 messages 表：

id          42
text        你好
user_id     7
created_at  2026-08-26...

第五种：文件或对象存储

适合：

头像
照片
视频
音频
PDF
项目导出文件

数据库通常保存文件信息和路径，对象存储保存真正文件。

数据库 media 表
id          88
user_id     7
path        avatars/7/profile.png
mime_type   image/png
size        245812

对象存储 bucket
avatars/7/profile.png   真正图片内容

第六种：Cookie 和 Session

用于维持登录状态等小型身份信息。

Cookie 在浏览器，Session 的主要状态可能在服务器或数据库。不要把完整用户资料和大文件都塞进 Cookie。

一张选择地图

只是当前页面临时显示？
  → React state

只在这台设备保存偏好或草稿？
  → localStorage

需要用户跨设备、刷新后长期存在？
  → 数据库

是图片、视频、PDF 等大文件？
  → 文件 / 对象存储，数据库保存元数据

只用于短时间计算或缓存？
  → 服务器内存或专业缓存

常见“假保存”问题

点击新增后列表出现，刷新消失

可能只更新了 React state，没有调用后端或数据库。

后端保存后，重新部署全部消失

可能写进服务器内存或临时文件系统，而不是持久数据库。

数据库有图片 URL，但图片 404

记录存在不代表文件存在。检查对象存储路径、权限和上传是否成功。

localStorage 里放 API Key

不安全。用户和页面脚本都可能读取，秘密必须留在服务器。

Supabase 里为什么同时有 Database 和 Storage

Database 是 Postgres 结构化数据；Storage 面向文件对象。二者可以通过用户 ID、文件路径和权限规则配合，但不是同一个容器。

参考：Supabase Database 官方说明和Supabase Storage 官方说明。

把留言放进后端文件里的 const messages = []，为什么上线后可能突然全部消失？

答案：这是服务器进程内存，不是持久数据库。服务重启、重新部署或请求落到另一实例后，内存数据不会可靠保留。