《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: stringrole: Rolecontent: stringcreatedAt: number
}
export interface SessionSummary {id: stringtitle: stringupdatedAt: number
}interface ChatStore {currentSessionId: string | nullsessions: Record<string, ChatMsg[]>summaries: SessionSummary[]setCurrentSession: (id: string) => voidaddMessage: (sessionId: string, msg: ChatMsg) => voidloadFromStorage: () => voidsaveToStorage: () => 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) returnconst 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 模板选择 + 参数填充」面板