当前位置：首页 > news >正文

《60天AI学习计划启动 | Day 38: 多会话多 Tab 同步（前端层）》

news 2026/6/11 15:10:19

Day 38：多会话 & 多 Tab 同步（前端层）

学习目标

设计多会话模型：当前会话 + 会话列表（标题/摘要/时间）
掌握利用 localStorage + storage 事件 做多 Tab 状态同步
实现简单的会话新建 / 重命名 / 归档逻辑

核心知识点

多会话数据模型
- Session：{ id, title, updatedAt, archived }
- SessionMessages：Record<sessionId, Message[]>
- Store 里需要：currentSessionId + sessions[] + messagesBySession
多 Tab 同步
- 写入：每次会话/消息变化 → localStorage.setItem('ai_sessions', JSON.stringify(...))
- 监听：window.addEventListener('storage', handler)，对同一域其他 Tab 生效
- 注意：当前 Tab 改变时也会写 localStorage，但 storage 事件不会在当前 Tab 触发

实战作业（附代码）

作业 1：多会话 TS 类型

export interface Session {id: stringtitle: stringupdatedAt: numberarchived?: boolean
}export interface Message {id: stringrole: 'user' | 'assistant'content: stringcreatedAt: number
}export interface SessionState {sessions: Session[]currentSessionId: string | nullmessagesBySession: Record<string, Message[]>
}

作业 2：多 Tab 同步 hook（简化版）

import { useEffect } from 'react'
import type { SessionState } from './types'const STORAGE_KEY = 'ai_chat_sessions'export function saveStateToStorage(state: SessionState) {localStorage.setItem(STORAGE_KEY, JSON.stringify(state))
}export function loadStateFromStorage(): SessionState | null {const raw = localStorage.getItem(STORAGE_KEY)if (!raw) return nulltry {return JSON.parse(raw)} catch {return null}
}export function useMultiTabSync(state: SessionState,setState: (s: SessionState) => void
) {// 初始化：加载本地数据useEffect(() => {const stored = loadStateFromStorage()if (stored) setState(stored)}, [setState])// 本 Tab 变化时写入 localStorage（可加节流）useEffect(() => {saveStateToStorage(state)}, [state])// 监听其他 Tab 的变更useEffect(() => {const handler = (e: StorageEvent) => {if (e.key !== STORAGE_KEY || !e.newValue) returntry {const next = JSON.parse(e.newValue) as SessionStatesetState(next)} catch {}}window.addEventListener('storage', handler)return () => window.removeEventListener('storage', handler)}, [setState])
}

作业 3：新建 / 重命名 / 归档会话 helpers

export function createSession(title = '新对话'): Session {return { id: crypto.randomUUID(), title, updatedAt: Date.now() }
}export function renameSession(s: Session, title: string): Session {return { ...s, title, updatedAt: Date.now() }
}export function archiveSession(s: Session): Session {return { ...s, archived: true, updatedAt: Date.now() }
}