用IndexedDB实现画布撤销重做需序列化可逆操作（命令模式）存入history对象仓库，维护指针定位当前状态，新操作清空后续记录；须控制步数、合并高频操作、同步渲染并确保事务完成。
用 IndexedDB 实现画布编辑历史的撤销重做，核心是把每次操作（如绘制、擦除、移动图层）序列化后存入数据库，并维护一个指针指向当前状态位置。它比内存缓存更可靠，能跨页面刷新保留历史，但要注意结构设计和事务控制。
设计合理的数据结构
不要直接存整个 canvas.toDataURL() 或复杂对象，而是记录“可逆操作”（即命令模式）。每条历史记录至少包含：
- type：操作类型（"draw", "erase", "move", "resize"）
- payload：执行所需最小数据（如起点/终点坐标、颜色、ID）
- timestamp：用于调试或按时间过滤
- snapshotId（可选）：若需快照式回滚，可额外存一次 canvas 的 imageData 或 JSON 描述
示例记录：
{
"id": "op_12345",
"type": "draw",
"payload": { "x": 100, "y": 200, "radius": 8, "color": "#333" },
"timestamp": 1715829341000
}
用 IndexedDB 存储并管理操作队列
创建一个 objectStore（比如叫 history），主键设为自增数字或时间戳+序号组合，保证插入顺序。关键逻辑：
- 每次用户操作后，调用 add() 写入新记录
- 执行撤销时，不删除记录，只移动内部指针（如
cursorIndex），再按反向顺序重放从当前到目标的操作（或直接还原到某快照） - 重做时，把指针前移，再正向重放后续操作
- 新操作发生时，清空指针之后的所有记录（即“剪掉”重做分支）
注意：所有写操作必须在 readwrite 事务中完成，读操作可用 readonly 提升性能。
控制存储大小与自动清理
IndexedDB 没有自动过期机制，需主动限制历史长度：
- 设置最大步数（如最多保存 100 步），插入新记录前先检查总数，超限时用 delete() 删除最早几条
- 避免存高频操作（如鼠标移动中的连续点），可合并为一笔“路径绘制”，或使用节流（throttle）只存关键帧
- 对大 payload（如图像 base64）考虑压缩或转存在 IndexedDB 的 blob store 中，用 ID 关联
与前端状态同步的关键细节
撤销重做不是单纯读写 DB，要和画布渲染严格同步：
- 每次成功写入 IndexedDB 后，才更新本地
historyStack和currentIndex - 撤销前先 clearRect() 画布，再逐条重放操作（或跳转到对应 snapshot）
- 监听 window.beforeunload，确保最后几步已落库（用
db.transaction(...).oncomplete确保写入完成） - 若支持多端同步，需加 version 字段防冲突，或用操作日志 + CRDT 思路，但单机场景通常不需要
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
