IndexedDB存储设计：OpenReel Video 持久化与媒体存储架构完整指南

IndexedDB存储设计OpenReel Video 持久化与媒体存储架构完整指南【免费下载链接】openreel-videoOpenReel Video - Professional browser-based video editor. Open source CapCut alternative. 100% browser-based, no installation, no cloud uploads, no watermarks.项目地址: https://gitcode.com/GitHub_Trending/op/openreel-videoOpenReel Video 是一款 100% 浏览器端运行的开源视频编辑器你的所有项目、视频素材和缓存数据都不会上传云端而是通过 IndexedDB 持久化存储在本机浏览器中。本文带你拆解它的 IndexedDB 存储设计从主数据库的 6 个对象存储、媒体 Blob 管理到自动保存恢复与 AES 加密安全存储看懂一套浏览器应用如何做到关机不丢数据、隐私不出设备。OpenReel Video 的核心理念是100% 客户端运行——不安装、不上传、无水印。这带来一个关键问题没有后端服务器项目数据存到哪里答案就是浏览器的 IndexedDB。为什么选择 IndexedDB 作为视频编辑器的持久化方案对浏览器端应用来说存储方案通常有三类方案容量上限能否存二进制是否持久localStorage约 5MB不适合是sessionStorage约 5MB不适合否关页即失IndexedDB通常为磁盘的 50%~100GB✅ 支持 Blob是一个视频项目动辄包含多段视频 Blob、波形数据、渲染缓存localStorage 根本装不下。IndexedDB 原生支持Blob、ArrayBuffer这类结构化克隆数据容量以 GB 计还可通过navigator.storage.estimate()查询配额——这正是 OpenReel Video 选择它的原因。整体架构四个 IndexedDB 数据库各司其职OpenReel Video 把不同性质的数据拆进 4 个独立的 IndexedDB 数据库互不干扰数据库名用途关键源码openreel-db主库项目、媒体、缓存、波形、文件句柄storage-engine.tsopenreel-autosave自动保存槽位与崩溃恢复auto-save.tsopenreel-secure主密码 AES-GCM 加密的密钥管理secure-storage.tsopenreel-projects/openreel-templates最近项目记录、项目模板project-manager.ts这种分库设计的好处很直观清空渲染缓存时不会碰用户项目重置安全存储不影响工程数据升级某个数据库版本时其他库的事务完全不受阻塞影响。主数据库的 6 个对象存储主库openreel-db当前版本DB_VERSION 3在首次打开时通过onupgradeneeded一次性创建 6 个对象存储定义集中在 types.ts对象存储主键索引存什么projectsidmodifiedAt、name序列化后的完整工程 JSONmediaidprojectId视频/音频 Blob 元数据cachekeytimestamp渲染帧缓存LRU 淘汰waveformsmediaId—音频波形数据fileHandleskey—File System Access API 文件句柄dirHandleskey—项目关联的文件夹句柄几个值得学习的设计细节1️⃣ 工程数据元信息 数据体分离存储。ProjectRecord同时保留name、createdAt、modifiedAt等轻量字段和完整序列化的data字符串见 types.ts#L16-L22。列出项目列表时只读摘要字段、按modifiedAt倒序返回storage-engine.ts#L221-L234无需反序列化整个工程首页加载因此非常快。2️⃣ 序列化层与存储层解耦。工程对象通过 serialization.ts 的serializeProject转成 JSON 字符串后再入库。存储引擎只认字符串工程结构未来怎么演进都不影响 IndexedDB 的读写逻辑。3️⃣ 级联删除保证数据一致性。删除项目时会先查出该项目名下所有媒体getMediaByProject走projectId索引逐个删除媒体与对应波形最后才删工程记录storage-engine.ts#L236-L258避免产生孤儿 Blob 长期占用磁盘。媒体存储Blob 直存与跨会话资产恢复用户上传的每一段素材都会以Blob形式整体写入media存储并通过projectId索引与工程绑定media-storage.ts。读取时按mediaId一次取回 Blob 和元数据无需任何中间格式转换。真正有意思的是另外两个存储fileHandles和dirHandles。它们的 key 设计很有讲究文件句柄key 为文件名:文件大小如intro.mp4:10485760。这样即使用户关闭浏览器下次打开同名同大小的文件时可以请求恢复上次的授权跳过重复授权流程文件夹句柄key 直接是projectId记住每个项目上次关联的素材文件夹。配合File System Access APIOpenReel Video 实现了浏览器端也能记住你本地素材位置的体验——这是纯 Web 编辑器少见的细节。自动保存三槽位轮转 哈希去重的崩溃恢复自动保存是浏览器编辑器防崩溃的最后一道防线OpenReel Video 的方案独立存放在openreel-autosave库中策略如下30 秒定时轮询2 秒防抖编辑动作标记脏状态后先防抖 2 秒落盘周期性扫描兜底3 个槽位轮转每保存一次写入slot 0/1/2循环槽位同一项目最多保留最近 3 份快照写满即淘汰最旧的天然控制存储占用哈希去重保存前对工程的关键统计量轨道数、剪辑数、媒体数、修改时间等计算哈希与上次已存哈希一致则跳过写入auto-save.ts#L377-L415杜绝没改动也写库的无效 IO崩溃恢复下次打开时调用checkForRecovery列出所有历史槽位用户可一键恢复到任意一份快照桌面端还会用hasUnsavedChanges判断关闭前是否需要提醒。这套定时 防抖 哈希去重 有限槽位的组合拳在恢复能力和存储成本之间取得了很好的平衡。安全存储AES-GCM 加密的敏感数据API 密钥等敏感信息不能明文躺在 IndexedDB 里。openreel-secure库采用浏览器原生 Web Crypto 实现主密码经PBKDF210 万次迭代 SHA-256派生出 AES-GCM-256 密钥每个密文使用独立随机 IV派生密钥只驻留内存、绝不落盘会话30 分钟不活动自动上锁密码连续 5 次失败进入指数退避锁定桌面端则直接桥接系统钥匙串Keychain体验更好。密钥派生与加解密逻辑见 secure-storage.ts#L134-L179。对新手来说这是纯前端做端到端加密的教科书式参考实现。容量管理与统一清理StorageEngine.getStorageUsage()综合返回四个指标已用空间、总配额来自navigator.storage.estimate()、项目数、媒体数方便 UI 展示存储占用。统一的clearAllStorage()入口会清空主库全部 6 个对象存储并连带删除openreel-autosave、openreel-projects、openreel-templates三个附属数据库media-storage.ts#L79-L94确保一键清除不留死角。同时所有操作都封装了结构化错误码如QUOTA_EXCEEDED、DATABASE_ERRORUI 层可以精准提示浏览器存储不足这类问题。给浏览器应用开发者的 5 条设计启示按数据生命周期分库可再生缓存、用户工程、加密密钥分开管理清理与升级互不影响摘要字段与数据体同记录存储列表页只读摘要避免全量反序列化大二进制走 Blob 外键索引媒体按projectId索引删除工程时级联清理自动保存用有限槽位 内容哈希恢复能力有上限、存储成本可控句柄类对象也值得持久化利用 File System Access API 的句柄持久化做出跨会话的本地资产体验。延伸阅读核心源码地图存储引擎实现storage-engine.ts数据库结构与记录类型types.ts工程序列化/反序列化serialization.ts媒体存储服务层media-storage.ts自动保存与崩溃恢复auto-save.tsAES-GCM 安全存储secure-storage.ts项目与最近列表管理project-manager.tsOpenReel Video 用纯前端的 IndexedDB 就撑起了一个专业级视频编辑器的全部数据层——如果你正在做浏览器端应用这套分库 分级存储 有限槽位自动保存的架构非常值得借鉴。【免费下载链接】openreel-videoOpenReel Video - Professional browser-based video editor. Open source CapCut alternative. 100% browser-based, no installation, no cloud uploads, no watermarks.项目地址: https://gitcode.com/GitHub_Trending/op/openreel-video创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考