摘要：AI 对话功能最容易被忽视的不是模型，是存储。localStorage 存聊天记录，5MB 天花板 + 全量 JSON.stringify + 同步阻塞，三天就爆。本文用一版“能跑但会死”的前端面板上线记录，把 localStorage / sessionStorage / IndexedDB 的边界讲成人话，并给一套聊天记录存储迁移模板：轻量草稿用 localStorage，会话历史直接上 IndexedDB，隐私模式再降级。
分类专栏：前端存储与离线实战 / Web 应用排坑 / AI 产品前端架构
文章标签：localStorageIndexedDB前端存储AI对话离线缓存浏览器原理
参与活动：#技术栈深潜计划
话题：前端存储与离线实战、AI 对话前端架构、浏览器原理排坑
一、最开始我都觉得“这有啥难的”
做 AI 对话框，后端接模型，前端不就：
const chats = JSON.parse(localStorage.getItem('chats') || '[]'); chats.push(newMsg); localStorage.setItem('chats', JSON.stringify(chats));三行，能跑，PR 合并，上线。
第一天：丝滑。
第二天：有个用户发了 3 万字论文总结，对话框开始卡。
第三天：控制台红成这样——
QuotaExceededError: Failed to execute 'setItem' on 'Storage': Setting the value of 'chats' exceeded the quota.页面一刷新，历史会话变空。
用户在反馈里写：
你这 AI 是会聊天的记事本，关掉就没记忆。
二、localStorage 不是“小数据库”，是“字符串抽屉”
很多人被名字骗了：
- 叫 storage，但不是数据库
- 只能存字符串
- 同步读写，主线程上跑
- 同域名约 5MB（按 UTF-16 算，实际字符数还不到 5M 个）
- 没索引、没查询、没事务
你每发一条消息都干这事：
