前端 AI 对话记忆管理实践：IndexedDB 与滑动窗口策略

然后实现上下文裁剪逻辑：

class HistoryManager {
  private db: IDBDatabase;
  // 设定保留的对话轮数（一轮 = User + Assistant）
  private readonly CONTEXT_WINDOW_SIZE = 10;

  constructor(db: IDBDatabase) {
    this.db = db;
  }

  /**
   * 核心方法：获取用于 API 调用的有效上下文
   * @param messages 完整的历史消息列表
   * @param systemPrompt 系统提示词
   * @returns 经过裁剪的、可用于发送的消息数组
   */
  public getValidContext(messages: Message[], systemPrompt: string): Message[] {
    // 1. 始终保留系统提示词
    const systemMessage: Message = {
      id: 'sys',
      role: 'system',
      content: systemPrompt,
      timestamp: 0,
    };

    // 2. 滑动窗口算法：只取最近的 N 条记录
    // 这里简单按条数裁剪，生产环境建议按 Token 数估算
    const historyWithoutSystem = messages.filter((m) => m.role !== 'system');
    const recentHistory = historyWithoutSystem.slice(-this.CONTEXT_WINDOW_SIZE * 2);

    // 3. 组装最终上下文：System Prompt + 最近对话
    return [systemMessage, ...recentHistory];
  }

持久化存储层：

// 数据库操作封装
class ChatDB {
  private dbName = 'AI_Chat_DB';
  private storeName = 'conversations';
  public db: IDBDatabase | null = null;

  async init(): Promise<void> {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open(this.dbName, 1);
      request.onerror = () => reject(request.error);
      request.onsuccess = () => {
        this.db = request.result;
        resolve();
      };
      // 创建表结构
      request.onupgradeneeded = (event: any) => {
        const db = event.target.result;
        if (!db.objectStoreNames.contains(this.storeName)) {
          db.createObjectStore(this.storeName, { keyPath: 'id' });
        }
      };
    });
  }

  /**
   * 保存或更新会话
   * 实战中建议做'防抖'处理，避免频繁写入
   */
  async saveConversation(conversation: Conversation): Promise<void> {
    if (!this.db) await this.init();
    return new Promise((resolve, reject) => {
      const transaction = this.db!.transaction([this.storeName], 'readwrite');
      const store = transaction.objectStore(this.storeName);
      const request = store.put(conversation);
      request.onsuccess = () => resolve();
      request.onerror = () => reject(request.error);
    });
  }
}

在实际业务组件中，调用流程如下：

// 业务逻辑伪代码
async function handleUserSend(
  userInput: string,
  currentConversation: Conversation
) {
  // 1. 构造用户消息
  const userMsg: Message = {
    id: crypto.randomUUID(),
    role: 'user',
    content: userInput,
    timestamp: Date.now(),
  };

  // 2. 更新本地状态（乐观更新 UI）
  currentConversation.messages.push(userMsg);

  // 3. 计算上下文（裁剪逻辑）
  const manager = new HistoryManager(dbInstance);
  const context = manager.getValidContext(
    currentConversation.messages,
    '你是一个资深的前端架构师，请用简洁的语言回答问题。'
  );

  // 4. 发送给 LLM API
  const aiResponse = await fetchAIResponse(context);

  // 5. 追加 AI 回复并持久化
  currentConversation.messages.push(aiResponse);
  currentConversation.updatedAt = Date.now();

  // 6. 存入 IndexedDB
  const chatDb = new ChatDB();
  await chatDb.saveConversation(currentConversation);
}

实践中的取舍

其实，前端的责任远不止发请求和渲染 UI。会话持久化和上下文裁剪做好了，能直接降低 Token 消耗，这对成本和用户体验都至关重要。

目前这套方案还是基于条数的简单裁剪，更精细的做法是按 Token 实际计数来动态调整窗口，甚至引入向量检索来实现长期记忆——让用户提问时自动提取最相关的历史片段注入上下文。这是下一步值得探索的方向。

技术选型没有银弹，只有最适合业务场景的方案。希望这套思路能为正在处理类似问题的前端同行提供一些务实的参考。