IndexedDB是HTML5中跨会话用户操作日志本地持久化存储的核心方案，因其支持结构化数据、异步操作、大容量及索引查询，而localStorage仅支持字符串键值对且无事务与查询能力，sessionStorage则仅限单次会话。
在HTML5中，跨会话的用户操作日志本地持久化存储，核心是使用 IndexedDB —— 它是浏览器原生支持的、面向对象的、异步的、容量较大（通常几十MB到数百MB）的客户端数据库，能真正实现结构化数据的长期保存，且不受页面关闭或浏览器重启影响。
为什么不用 localStorage 或 sessionStorage？
localStorage 虽然支持跨会话，但存在明显局限：
- 仅支持字符串键值对，日志需手动序列化/反序列化（JSON.stringify / parse），易出错且无索引能力；
- 无事务机制，高频率写入（如连续点击、滚动）下可能丢失数据或破坏结构；
- 无查询能力，无法按时间范围、操作类型等条件检索日志；
- 容量小（通常5–10MB），日志持续积累易触发 QuotaExceededError。
sessionStorage 更不适用——仅限单次页面会话，关闭标签页即清空。
用 IndexedDB 存储操作日志的关键设计
建议为日志建立独立 object store（如
"userActions"），并设置复合索引提升查询效率：- 主键可设为自增数字（
autoIncrement: true），保证插入顺序和唯一性； - 添加
timestamp索引，支持按时间范围筛选（如“最近24小时操作”）； - 添加
type索引（如 "click"、"input"、"scroll"），便于分类统计； - 日志条目结构示例：
{ id: 1, type: "click", target: "button#submit", x: 120, y: 85, timestamp: 1717023456789, url: "/form" }
简化 IndexedDB 操作：推荐封装或使用成熟库
原生 IndexedDB API 较繁琐（需处理大量事件回调）。实际项目中建议：
- 轻量级封装：用 Promise 包装 open、add、get、index.openCursor 等操作，统一错误处理；
- 采用成熟库如 Dexie.js（基于 IndexedDB 的增强封装），代码简洁清晰：
Dexie.open("LogDB", { version: 1, schema: { userActions: "++id,×tamp,type,url" } })
写入一行日志仅需：db.userActions.add({ type: "click", target: "...", timestamp: Date.now() })； - 注意：避免在主线程高频直接调用 add()，可做简单节流或批量写入（如每10条或500ms flush 一次）以减少 I/O 压力。
补充策略：兜底与清理
为保障可靠性与用户体验，建议配套以下实践：
- 写入失败降级：IndexedDB 不可用时（如隐私模式、旧版 Safari），自动 fallback 到 localStorage 存少量关键日志（如最后5条），并标记“临时缓存”，后续恢复时尝试迁移；
- 定期清理：通过定时任务（如页面空闲时或下次启动时）删除超过30天的日志，防止无限增长；
- 用户可控导出：提供“导出日志（JSON）”按钮，方便调试或合规审计；
- 敏感信息过滤：记录前剥离 password、token、个人身份字段（如 input value 中的身份证号），符合最小必要原则。
- 主键可设为自增数字（
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
