FreeReNamer双端存储方案完整剖析：IndexedDB与Tauri Store如何无缝统一

FreeReNamer双端存储方案完整剖析IndexedDB与Tauri Store如何无缝统一【免费下载链接】FreeReNamer功能强大又易用的文件批量重命名软件项目地址: https://gitcode.com/gh_mirrors/fr/FreeReNamerFreeReNamer 是一款功能强大又易用的文件批量重命名软件同时提供网页版和桌面版。那么问题来了同一套代码如何在浏览器和桌面端分别使用 IndexedDB 与 Tauri Store 两套完全不同的本地数据库这篇文章带你快速看懂它的双端存储统一方案即使是新手也能轻松理解。为什么需要双端存储一套代码两种环境 FreeReNamer 面向两类用户网页端用户打开浏览器就能用无需安装任何软件数据只能存放在浏览器的IndexedDB中桌面端用户通过 Tauri 打包成原生应用直接操作本地文件系统数据则存放在本地 JSON 文件由Tauri Store插件管理如果为两端各写一套存储代码维护成本会翻倍。FreeReNamer 的做法是抽象出一个统一的存储层让业务代码无感地读写数据。存储抽象层一个 LocalStore 搞定两种数据库核心实现在 src/lib/store.ts 中的LocalStore类。它只暴露三个方法set、get、delete内部根据运行平台自动分流桌面端 → 延迟加载tauri-plugin-store-api读写data.dat文件网页端 → 延迟加载idb-keyval库IndexedDB 的轻量封装读写浏览器本地数据库async setT(key: string, value: T): Promisevoid { if (__PLATFORM__ __PLATFORM_TAURI__) { return (await this.getStore())!.set(key, value); } // 网页端走 IndexedDB const { set } await import(idb-keyval); return set(key, value); }两个细节值得学习动态 import只有真正运行在对应平台时才会加载对应的存储库避免把用不到的依赖打包进去接口完全一致上层业务只管store.set(key, value)根本不关心数据最终落在磁盘文件还是浏览器数据库里平台是如何被识别的构建时注入的全局变量 关键在于三个构建期常量__PLATFORM__、__PLATFORM_TAURI__、__PLATFORM_WEB__。工作流程如下package.json 中通过cross-env设置环境变量如PLATFORMweb或PLATFORMtaurivite.config.ts 在define配置中把该值注入为全局常量构建完成后代码里的__PLATFORM__已被替换为实际字符串运行时的判断成本几乎为零这就是为什么同一份前端代码构建两次就能分别产出网页版和桌面版。存的是什么重命名配置文件与 AI 参数统一存储层里保存的核心数据有两类配置文件Profile每个 Profile 包含一组重命名规则替换、删除、格式、模板、脚本、插入等规则定义在 src/lib/rules/ 目录下。src/lib/profile.ts 负责 Profile 的增删改查键名规则为profile/{id}AI 配置列表AI 重命名功能所需的 API 参数封装在 src/lib/settings/ai-config-store.ts所有键名统一收敛在 src/lib/query.ts 的QueryType枚举中避免散落的魔法字符串。数据流从存储到界面预览存储层之上还有两层协作TanStack Querysrc/lib/queries/profile.ts 和 src/lib/queries/file.ts 负责异步加载数据与缓存其中fileItemInfoQueryOptions会读取 Profile → 解析文件信息 → 执行全部启用的规则最终生成每个文件的重命名预览Jotaisrc/lib/atoms/index.ts 管理当前选中的文件等 UI 状态且文件类型也按平台区分桌面端是路径字符串网页端是FileSystemFileHandle小结双端统一的三个关键设计 ✅设计点做法收益存储抽象LocalStore统一 set/get/delete 接口业务代码零感知平台差异平台识别构建时注入__PLATFORM__常量运行判断成本趋近于零按需加载动态 import 平台专属依赖包体积更小、无冗余代码对于同样想做出网页 桌面双端应用的朋友FreeReNamer 这套IndexedDB 与 Tauri Store 无缝统一的存储方案是一个非常值得借鉴的轻量级范例。【免费下载链接】FreeReNamer功能强大又易用的文件批量重命名软件项目地址: https://gitcode.com/gh_mirrors/fr/FreeReNamer创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考