《60天AI学习计划启动 | Day 33: 前端 AI 状态管理 & 缓存（会话 / 历史 / 本地持久化）》

Day 33：前端 AI 状态管理 & 缓存（会话 / 历史 / 本地持久化）

学习目标

• 理清 聊天类 AI 应用前端需要管理的状态维度
• 掌握 用轻量状态库（如 Zustand）管理会话 & 全局配置
• 会实现 最近 N 条会话的本地缓存（localStorage）

---

核心知识点

• 1. 需要管理的状态

  • 会话级：messages, loading, error, streaming, abortController
  • 应用级：currentSessionId, sessionsList, 全局设置(温度/模型/语言)
  • 本地持久化：最近 N 条会话、最近问题列表（用于“快捷问题”）

• 2. 前端状态分层

  • 组件内部：inputValue, 临时文件, UI 展开折叠
  • 全局 store：会话列表、当前会话、模型配置、历史记录
  • 持久层：localStorage / IndexedDB 存储精简后的会话摘要

• 3. 缓存策略

  • 缓存什么：
    • 会话摘要：id, title, lastMessage, updatedAt
    • 每个会话的最近 K 条消息（不要全量存所有 token）
  • 不缓存什么：
    • 敏感信息（账号、token、隐私数据）
    • 大文件内容（只存 fileId / url）

---

简单 Demo：Zustand 管理会话 & 本地缓存

import create from 'zustand'

export type Role = 'user' | 'assistant'
export interface ChatMsg {
  id: string
  role: Role
  content: string
  createdAt: number
}
export interface SessionSummary {
  id: string
  title: string
  updatedAt: number
}

interface ChatStore {
  currentSessionId: string | null
  sessions: Record<string, ChatMsg[]>
  summaries: SessionSummary[]
  setCurrentSession: (id: string) => void
  addMessage: (sessionId: string, msg: ChatMsg) => void
  loadFromStorage: () => void
  saveToStorage: () => void
}

const STORAGE_KEY = 'demo_ai_chat'

export const useChatStore = create<ChatStore>((set, get) => ({
  currentSessionId: null,
  sessions: {},
  summaries: [],
  setCurrentSession: (id) => set({ currentSessionId: id }),
  addMessage: (sessionId, msg) => {
    const { sessions, summaries } = get()
    const list = sessions[sessionId] || []
    const newList = [...list, msg]
    const title = newList[0]?.content.slice(0, 20) || '新会话'
    const updated = Date.now()
    const newSummaries = [
      { id: sessionId, title, updatedAt: updated },
      ...summaries.filter((s) => s.id !== sessionId)
    ].slice(0, 20) // 只保留最近20个会话
    set({
      sessions: { ...sessions, [sessionId]: newList },
      summaries: newSummaries
    })
  },
  loadFromStorage: () => {
    try {
      const raw = localStorage.getItem(STORAGE_KEY)
      if (!raw) return
      const data = JSON.parse(raw)
      set({
        sessions: data.sessions || {},
        summaries: data.summaries || [],
        currentSessionId: data.currentSessionId || null
      })
    } catch {}
  },
  saveToStorage: () => {
    const { sessions, summaries, currentSessionId } = get()
    const payload = { sessions, summaries, currentSessionId }
    localStorage.setItem(STORAGE_KEY, JSON.stringify(payload))
  }
}))

组件挂载时调用 loadFromStorage()，在消息变更后节流调用 saveToStorage() 即可。

---

明日学习计划预告（Day 34）

• 主题：前端 Prompt 模板 & 配置化
• 内容方向：
  • 在前端管理 Prompt 片段（角色/语气/结构化输出说明）
  • 做一个简单的「Prompt 模板选择 + 参数填充」面板