EPubBuilder如何实现『最近文件』功能：IndexedDB存储EPUB二进制的实战指南

EPubBuilder如何实现『最近文件』功能IndexedDB存储EPUB二进制的实战指南【免费下载链接】EPubBuilder一款在线的epub格式书籍编辑器项目地址: https://gitcode.com/gh_mirrors/ep/EPubBuilderEPubBuilder 是一款在线的 EPUB 电子书编辑器它的『最近文件』功能让你无需重新找文件一键就能继续编辑上次打开的书籍。实现这个功能的关键是利用浏览器原生的IndexedDB把 EPUB 二进制Blob直接存进本地数据库再用一条轻量级引用列表维护最近打开的 10 个书名。本文带你完整拆解这套设计。一、为什么选择 IndexedDBEPUB 本质上是一个 ZIP 压缩包包含 mimetype、container.xml、content.opf 等一堆文件整体是一个二进制流。在浏览器里想让它记住有这么几个限制方案能否存二进制容量结论Cookie❌~4KB不可行localStorage❌只能存字符串~5MB需 Base64 膨胀不划算IndexedDB✅ 直接存 Blob可达数百 MB✔ 最优解所以 EPubBuilder 在 src/js/IndexedDBStore.js 中封装了一个独立的存储模块数据库名为EPubBuilderDB并采用双仓库Object Store结构epubs仓库以文件名为主键保存完整记录——文件名、EPUB 二进制 Blob、文件大小、最近打开时间settings仓库只存一条recentList记录内容是最近 10 个文件名的数组。 这种二进制归二进制、索引归索引的拆分是全文的核心设计列表展示时只读轻量索引不碰大文件。仓库结构在数据库首次打开时通过onupgradeneeded事件自动创建见 IndexedDBStore.js#L43-L56还额外建了lastOpened索引方便后续按时间查询。二、保存文件一次事务写两个仓库当你在打开文件弹窗里选择本地 EPUB 时EpubBuilder.js 的处理流程是用FileReader把文件读成 ArrayBuffer包一层new Blob([arrayBuffer], { type: application/epubzip })调用idbStore.saveEpub(file.name, blob)存入 IndexedDB同时用 JSZip 解压并加载进编辑器。saveEpub的实现见 IndexedDBStore.js#L65-L117有几个值得学习的细节一次事务覆盖两个仓库保证写入文件和更新引用列表要么都成功、要么都回滚去重再置顶若该文件名已在列表中先移除再unshift插到头部容量截断超过 10 个就slice(0, 10)天然实现最近 10 个。// 存入 epubs store 的记录结构简化 { name: 我的电子书.epub, blob: EPUB 二进制 Blob, size: 245760, lastOpened: 1758750000000 }三、读取列表只查元数据不碰大文件每次打开弹窗renderRecentList 会调用getRecentList渲染列表。它的策略非常聪明IndexedDBStore.js#L157-L208先从settings仓库取出文件名数组再逐个去epubs仓库取元数据文件名、大小、最近打开时间返回时不含 Blob按引用列表的顺序排列返回保证越靠前 越常打开。界面上每个条目显示文件名 日期 大小B/KB/MB自适应格式化见 EpubBuilder.js#L234-L239样式定义在 main.css#L244-L293列表限高 240px 可滚动文件名超长自动省略号悬停高亮。点击某条目时getEpub才真正取出 Blob交给 JSZip 解压、解析出目录与正文灌入左侧标题树和右侧富文本编辑器。读取的同时内部_touch方法会把该文件的lastOpened刷新为当前时间戳——这就是最近排序的时间来源。四、删除单个文件与一键清空历史管理历史提供两级操作全部是双仓库同事务的写法删除单个deleteEpubIndexedDBStore.js#L215-L245删掉epubs仓库中的 Blob同时从recentList数组中过滤掉该文件名清除全部历史clearAllIndexedDBStore.js#L251-L270两个仓库直接clear()清空。界面上点击清除历史会先弹出确认框文案确定清除所有历史记录来自 i18n.js确认后执行并刷新列表。对应的多语言文案中文近期文件 / 暂无近期文件、英文Recent Files / No recent files维护在 src/lang/i18n.js让界面在两种语言下都有完整的提示体验。五、模块是怎么挂载到应用里的整个功能不依赖任何第三方存储库挂载路径很简洁src/index.html 按顺序引入jszip、FileSaver、IndexedDBStore.jsRequireJS 入口模块 src/js/main.js 中创建全局单例// IndexedDB store instance — used by EpubBuilder for recent-file storage window.idbStore new IndexedDBStore();EpubBuilder的打开按钮触发importEpub→ 弹出文件选择 Modal上半区选本地文件下半区展示近期文件列表形成完整闭环。六、可以抄走的 5 个实战要点如果你也要在浏览器应用里做最近文件/最近项目这套实现给出了可直接套用的模式二进制用 IndexedDB索引用轻量数组——元数据与本体分仓存放列表加载速度不受文件大小影响写操作放在同一个事务——文件与索引要么同成功、要么同回滚避免列表有记录但文件丢了的脏数据去重 头部插入 长度截断——三行代码实现 LRU 式最近列表无需额外排序以文件名为 keyPath——天然防重名覆盖同名文件再次打开会更新而不是新增读取即刷新时间戳_touch——让最近语义始终准确。写在最后EPubBuilder 用不到 300 行原生 IndexedDB 代码就为在线编辑器加上了记忆打开过 10 本以内的书随时能一键找回。对于以文本、图片、文档为主的 Web 应用这套IndexedDB 存 Blob 设置仓存引用列表的方案几乎是最轻量也最可靠的本地持久化实践值得收藏进你的技术工具箱 。【免费下载链接】EPubBuilder一款在线的epub格式书籍编辑器项目地址: https://gitcode.com/gh_mirrors/ep/EPubBuilder创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考