引言：别让灵感像断线的风筝想象一下这个场景：你正在用AI写作助手写一篇万字长文，AI 正“吐字如飞”地给你输出精彩段落。突然，老板喊你开会，或者你的猫踩到了键盘强制刷新了页面……等你回来一看，刚才那篇写到一半的神作，没了！这就像你看视频看到高潮部分突然断网，或者读小说读到关键剧情书签丢了，简直让人抓狂。在AI 写作助手中，为了避免这种“灵感蒸发”的惨剧，我们需要设计一套流式数据缓存策略。简单来说，就是给 AI 的每一次“吐字”都打上时间戳，分段存进浏览器的"保险箱"（IndexedDB）里。哪怕中途断网、关页面，下次打开也能无缝续写，甚至还能像看录像一样回放之前的生成过程。今天，我们就来手把手实现这个"断点续传"神器！第一部分：什么是流式数据？为什么需要缓存？什么是流式输出？AI 生成内容不是一蹴而就的，而是像挤牙膏一样，一个字一个字（或一个词一个词）蹦出来的。这种数据在技术上叫流式数据（Stream Data）。为什么不能等全部生成完再存？时间太长：一篇长文AI可能要生成几分钟，如果等全部完成再存，中间断网就全丢了。内存爆炸：如果把所有内容都放在内存里，长文本很容易导致浏览器卡顿甚至崩溃。用户体验：边生成边存，用户随时刷新都能看到最新进度，安全感拉满。所以，我们的策略是：来一段，存一段！第二部分：什么是 IndexedDB？为什么选它？浏览器提供了多种存储方案，为什么我们偏偏选中了IndexedDB？存储方案容量限制存储格式异步/同步适用场景localStorage约 5MB字符串同步（会阻塞UI）存个Token、用户偏好sessionStorage约 5MB字符串同步临时表单数据IndexedDB数百MB甚至更多结构化对象异步（不阻塞UI）大量流式数据、离线缓存一句话总结：localStorage 是个小抽屉，放点钥匙还行；IndexedDB 是个大仓库，还能按标签快速找东西，存 AI 生成的长文简直完美。第三部分：设计数据结构——StreamChunk 接口详解在写代码之前，我们先设计好“集装箱”的规格。每个 AI 吐出的片段，我们都用一个 StreamChunk 对象来包装：interfaceStreamChunk{id?:number;// 数据库自增主键，不用我们操心sessionId:string;// 会话 ID：相当于“哪篇文章”的身份证chunkIndex:number;// 片段序号：第几块拼图，保证顺序不乱content:string;// 内容：AI 这次吐出来的文字timestamp:number;// 时间戳：什么时候吐的，回放时靠它控制节奏isFinal:boolean;// 是否结束：AI说"我说完了"的标记}通俗比喻：sessionId = 快递单号（同一篇文章的所有片段共享一个单号）chunkIndex = 拼图编号（1, 2, 3… 保证拼出来不乱序）timestamp = 录像时间轴（回放时知道哪里该停顿）isFinal = 导演喊"卡"的信号第四部分：五大核心功能代码实现下面是完整的StreamCache类，包含了所有核心方法。/** * 流式数据缓存管理器 * 负责将AI生成的流式内容分段存入IndexedDB */classStreamCache{privatedbName='AIWriterCache';privatestoreName='streamChunks';privatedb:IDBDatabase|null=null;/** * 初始化数据库连接 * 如果数据库不存在则创建，并建立必要的索引 */asyncinit():Promisevoid{returnnewPromise((resolve,reject)={constrequest=indexedDB.open(this.dbName,1);// 数据库首次创建或版本升级时触发request.onupgradeneeded=(event)={constdb=(event.targetasIDBOpenDBRequest).result;// 创建对象仓库（相当于表），以id为自增主键if(!db.objectStoreNames.contains(this.storeName)){conststore=db.createObjectStore(this.storeName,{keyPath:'id',autoIncrement:true,});// 创建复合索引：按 sessionId + chunkIndex 联合查询// 这样我们可以快速找到某篇文章的所有片段，且天然有序store.createIndex('session_chunk',['sessionId','chunkIndex'],{unique:false,});// 创建时间索引：用于按时间清理旧数据store.createIndex('timestamp','timestamp',{unique:false});}};request.onsuccess=(event)={this.db=(event.target 流式数据缓存策略——让AI写作助手支持“断点续传“
引言：别让灵感像断线的风筝想象一下这个场景：你正在用AI写作助手写一篇万字长文，AI 正“吐字如飞”地给你输出精彩段落。突然，老板喊你开会，或者你的猫踩到了键盘强制刷新了页面……等你回来一看，刚才那篇写到一半的神作，没了！这就像你看视频看到高潮部分突然断网，或者读小说读到关键剧情书签丢了，简直让人抓狂。在AI 写作助手中，为了避免这种“灵感蒸发”的惨剧，我们需要设计一套流式数据缓存策略。简单来说，就是给 AI 的每一次“吐字”都打上时间戳，分段存进浏览器的"保险箱"（IndexedDB）里。哪怕中途断网、关页面，下次打开也能无缝续写，甚至还能像看录像一样回放之前的生成过程。今天，我们就来手把手实现这个"断点续传"神器！第一部分：什么是流式数据？为什么需要缓存？什么是流式输出？AI 生成内容不是一蹴而就的，而是像挤牙膏一样，一个字一个字（或一个词一个词）蹦出来的。这种数据在技术上叫流式数据（Stream Data）。为什么不能等全部生成完再存？时间太长：一篇长文AI可能要生成几分钟，如果等全部完成再存，中间断网就全丢了。内存爆炸：如果把所有内容都放在内存里，长文本很容易导致浏览器卡顿甚至崩溃。用户体验：边生成边存，用户随时刷新都能看到最新进度，安全感拉满。所以，我们的策略是：来一段，存一段！第二部分：什么是 IndexedDB？为什么选它？浏览器提供了多种存储方案，为什么我们偏偏选中了IndexedDB？存储方案容量限制存储格式异步/同步适用场景localStorage约 5MB字符串同步（会阻塞UI）存个Token、用户偏好sessionStorage约 5MB字符串同步临时表单数据IndexedDB数百MB甚至更多结构化对象异步（不阻塞UI）大量流式数据、离线缓存一句话总结：localStorage 是个小抽屉，放点钥匙还行；IndexedDB 是个大仓库，还能按标签快速找东西，存 AI 生成的长文简直完美。第三部分：设计数据结构——StreamChunk 接口详解在写代码之前，我们先设计好“集装箱”的规格。每个 AI 吐出的片段，我们都用一个 StreamChunk 对象来包装：interfaceStreamChunk{id?:number;// 数据库自增主键，不用我们操心sessionId:string;// 会话 ID：相当于“哪篇文章”的身份证chunkIndex:number;// 片段序号：第几块拼图，保证顺序不乱content:string;// 内容：AI 这次吐出来的文字timestamp:number;// 时间戳：什么时候吐的，回放时靠它控制节奏isFinal:boolean;// 是否结束：AI说"我说完了"的标记}通俗比喻：sessionId = 快递单号（同一篇文章的所有片段共享一个单号）chunkIndex = 拼图编号（1, 2, 3… 保证拼出来不乱序）timestamp = 录像时间轴（回放时知道哪里该停顿）isFinal = 导演喊"卡"的信号第四部分：五大核心功能代码实现下面是完整的StreamCache类，包含了所有核心方法。/** * 流式数据缓存管理器 * 负责将AI生成的流式内容分段存入IndexedDB */classStreamCache{privatedbName='AIWriterCache';privatestoreName='streamChunks';privatedb:IDBDatabase|null=null;/** * 初始化数据库连接 * 如果数据库不存在则创建，并建立必要的索引 */asyncinit():Promisevoid{returnnewPromise((resolve,reject)={constrequest=indexedDB.open(this.dbName,1);// 数据库首次创建或版本升级时触发request.onupgradeneeded=(event)={constdb=(event.targetasIDBOpenDBRequest).result;// 创建对象仓库（相当于表），以id为自增主键if(!db.objectStoreNames.contains(this.storeName)){conststore=db.createObjectStore(this.storeName,{keyPath:'id',autoIncrement:true,});// 创建复合索引：按 sessionId + chunkIndex 联合查询// 这样我们可以快速找到某篇文章的所有片段，且天然有序store.createIndex('session_chunk',['sessionId','chunkIndex'],{unique:false,});// 创建时间索引：用于按时间清理旧数据store.createIndex('timestamp','timestamp',{unique:false});}};request.onsuccess=(event)={this.db=(event.target