摘要：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 个）没索引、没查询、没事务你每发一条消息都干这事： 【排障】我把 AI 聊天记录塞进 localStorage，第三天全量丢消息，用户骂我“会聊天的记事本”
摘要：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 个）没索引、没查询、没事务你每发一条消息都干这事： RELATED READING
延伸阅读
更多一线实战笔记与深度复盘，助您持续精进
