11 KiB
11 KiB
数据持久化策略
**本文档引用的文件** - [index.html](file://index.html)目录
简介
本项目为“有维商学”前端单页应用，当前未实现任何客户端数据持久化（如 localStorage/sessionStorage、IndexedDB、Web SQL 等），所有用户状态与界面交互均为内存态，刷新即丢失。本文档围绕现有代码现状，提出数据持久化策略与扩展方案，涵盖数据模型设计、同步机制、备份恢复、清理规则、隐私保护、迁移升级、性能优化与安全考虑，并提供可视化图示辅助理解。
项目结构
- 单文件 HTML 应用，包含完整的页面结构、样式与内联 JavaScript。
- 页面包含登录页、仪表盘、AI智能体页等，通过内联脚本实现页面切换与交互。
- 无外部依赖，所有逻辑集中在 index.html 中。
graph TB
A["index.html<br/>主页面与内联脚本"] --> B["登录页<br/>表单与提交逻辑"]
A --> C["仪表盘页<br/>导航与Tab切换"]
A --> D["AI智能体页<br/>卡片与筛选"]
A --> E["聊天弹窗<br/>消息发送与显示"]
图表来源
章节来源
核心组件
- 用户状态管理：当前登录用户名在内存中维护，页面切换与用户头像显示依赖该变量。
- 页面路由：通过内联函数切换页面与 Tab，无历史记录持久化。
- 交互组件：用户菜单、行业筛选、聊天对话等均为内存态，未与持久化绑定。
章节来源
架构总览
当前架构为纯前端单页应用，无后端接口调用与数据持久化层。若要引入数据持久化，建议采用如下分层：
- 表现层：index.html 的页面与交互逻辑
- 业务层：用户、课程、AI对话、会员状态等数据模型与业务规则
- 持久化层：localStorage/sessionStorage（短期）、IndexedDB（长期）、Web SQL（兼容）
- 同步层：与后端 API 的数据同步与一致性保障
- 安全层：加密、访问控制、审计日志
graph TB
subgraph "表现层"
UI["index.html<br/>页面与交互"]
end
subgraph "业务层"
UM["用户模型"]
CM["课程模型"]
AIM["AI对话模型"]
MEM["会员状态模型"]
end
subgraph "持久化层"
LS["localStorage"]
SS["sessionStorage"]
IDB["IndexedDB"]
WSQL["Web SQL"]
end
subgraph "同步层"
API["后端API"]
end
subgraph "安全层"
ENC["加密"]
ACL["访问控制"]
AUDIT["审计日志"]
end
UI --> UM
UI --> CM
UI --> AIM
UI --> MEM
UM --> LS
CM --> LS
AIM --> LS
MEM --> LS
LS --> IDB
SS --> IDB
IDB --> API
WSQL --> API
API --> ENC
API --> ACL
API --> AUDIT
图表来源
详细组件分析
用户数据模型与持久化
- 当前实现：登录用户名保存在内存变量中，刷新即丢失；用户头像与显示名称通过更新 DOM 实现。
- 建议模型字段（示例）：
- 用户标识、昵称、头像、登录时间、最近活跃时间、设备指纹、会员等级、权限集合
- 持久化策略：
- 短期：sessionStorage（会话级，浏览器关闭即清空）
- 长期：localStorage（跨会话保留，需注意隐私与容量）
- 安全：对敏感字段进行加密存储，定期轮换密钥
classDiagram
class UserModel {
+string userId
+string displayName
+string avatar
+datetime lastLogin
+datetime lastActive
+string deviceFingerprint
+string membershipLevel
+array permissions
+saveToStorage()
+loadFromStorage()
+clearStorage()
}
图表来源
章节来源
课程数据模型与持久化
- 当前实现：课程列表为静态展示，无用户学习进度与收藏状态。
- 建议模型字段（示例）：
- 课程ID、标题、描述、时长、学习状态、完成时间、评分、笔记
- 持久化策略：
- 使用 IndexedDB 存储结构化课程数据，支持复杂查询与索引
- localStorage 仅用于轻量元数据（如最近浏览）
classDiagram
class CourseModel {
+string courseId
+string title
+string description
+number duration
+string status
+datetime completedAt
+number rating
+string notes
+saveToDB()
+loadFromDB()
+syncWithServer()
}
图表来源
章节来源
AI对话记录模型与持久化
- 当前实现：聊天弹窗为内存态，消息在页面内渲染，无持久化。
- 建议模型字段（示例）：
- 对话ID、AI角色、消息数组（含时间戳、类型、内容）、会话标签、创建/更新时间
- 持久化策略：
- IndexedDB 分区存储（按角色/日期），支持批量写入与增量同步
- sessionStorage 用于临时草稿
classDiagram
class ChatRecordModel {
+string chatId
+string aiRole
+array messages
+string tag
+datetime createdAt
+datetime updatedAt
+saveToDB()
+loadFromDB()
+exportHistory()
}
图表来源
章节来源
会员状态模型与持久化
- 当前实现：会员体系为静态展示，无用户会员状态与有效期持久化。
- 建议模型字段（示例）：
- 会员ID、类型、到期时间、续费记录、权益清单、订阅状态
- 持久化策略：
- localStorage/sessionStorage 保存当前会话状态
- IndexedDB 存储历史订阅与权益变更
classDiagram
class MembershipModel {
+string membershipId
+string level
+datetime expireAt
+array renewalRecords
+array privileges
+string subscriptionStatus
+saveToStorage()
+loadFromStorage()
+checkRenewalDue()
}
图表来源
章节来源
数据同步机制与一致性
- 离线优先：本地 IndexedDB 作为主存储，sessionStorage 作为缓存层
- 在线同步：通过后端 API 接口进行双向同步，冲突解决采用时间戳与版本号
- 一致性策略：
- 写入本地后立即标记为“待同步”
- 后台任务周期性上传，失败重试指数退避
- 下发变更时进行本地合并与冲突消解
sequenceDiagram
participant UI as "界面"
participant Local as "本地存储(IndexedDB)"
participant Sync as "同步队列"
participant API as "后端API"
UI->>Local : 写入数据(标记待同步)
Local-->>Sync : 入队
Sync->>API : 上传变更
API-->>Sync : 返回结果
Sync->>Local : 标记已同步/更新状态
API-->>UI : 下发最新数据(推送/拉取)
图表来源
章节来源
数据备份与恢复策略
- 备份：定期导出用户数据（JSON/CSV），支持选择性导出（用户、课程、对话、会员）
- 恢复：导入时进行格式校验与冲突检测，支持增量恢复
- 清理：过期数据（如历史对话、过期会员）自动归档或删除
flowchart TD
Start(["开始"]) --> Export["导出数据"]
Export --> Validate{"校验格式"}
Validate --> |通过| Save["保存到本地/云端"]
Validate --> |失败| Fix["修复格式错误"]
Fix --> Export
Save --> Restore["导入数据"]
Restore --> Merge["合并/冲突检测"]
Merge --> Apply["应用到本地存储"]
Apply --> End(["结束"])
图表来源
章节来源
数据清理规则与隐私保护
- 清理规则：
- 会话结束后清理 sessionStorage
- 30天未登录的用户数据进行匿名化处理
- 过期会员数据定期归档
- 隐私保护：
- 敏感字段（如手机号、支付信息）加密存储
- 本地不保留明文敏感数据
- 提供数据删除与匿名化选项
章节来源
数据迁移与版本升级
- 版本管理：在本地存储中记录 schema 版本号
- 迁移流程：
- 启动时检查版本，执行迁移脚本
- 支持回滚与增量迁移
- 迁移完成后更新版本号
章节来源
性能优化建议
- 批量操作：将多次小写入合并为批量写入，减少索引重建
- 索引优化：为常用查询字段建立复合索引（如用户ID+时间）
- 内存管理：及时释放大对象引用，避免内存泄漏
- 缓存策略：合理使用 sessionStorage 与 localStorage，避免超限
章节来源
数据安全考虑
- 加密：对敏感字段进行对称加密，密钥与数据分离存储
- 访问控制：基于用户权限与角色的最小授权原则
- 审计日志：记录关键数据变更与访问行为，便于追踪
章节来源
依赖关系分析
- 当前依赖：无外部依赖，所有逻辑内联于 index.html
- 扩展依赖：引入 IndexedDB/Web SQL 后，需考虑浏览器兼容性与降级策略
graph LR
IDX["IndexedDB API"] --> PERSIST["持久化层"]
Sess["sessionStorage API"] --> PERSIST
Local["localStorage API"] --> PERSIST
PERSIST --> SYNC["同步层"]
SYNC --> API["后端API"]
图表来源
章节来源
性能考量
- 读写性能：优先使用 IndexedDB，localStorage 仅用于轻量数据
- 网络性能：离线优先，后台异步同步，避免阻塞主线程
- 内存占用：控制单次加载数据量，使用分页与懒加载
[本节为通用指导，无需特定文件来源]
故障排查指南
- 常见问题：
- 浏览器禁用 localStorage/sessionStorage 导致状态丢失
- IndexedDB 不可用或存储空间不足
- 同步失败导致数据不一致
- 排查步骤：
- 检查浏览器开发者工具的 Application/Storage 面板
- 查看同步队列与错误日志
- 验证后端 API 响应与鉴权状态
章节来源
结论
当前项目为纯前端单页应用，尚未实现数据持久化。建议尽快引入 IndexedDB 作为主要存储，结合 localStorage/sessionStorage 与后端 API，构建完整的数据持久化与同步体系。同时完善备份恢复、清理规则、隐私保护与安全策略，确保用户体验与数据安全。
[本节为总结，无需特定文件来源]
附录
- 参考实现位置：
- 用户状态与页面切换：index.html
- 聊天对话与消息渲染：index.html
- 行业筛选与卡片展示：index.html