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 模板选择 + 参数填充」面板
