如何通过JavaScript打开目录并将其作为图片等资产的持久化存储源？

核心选择：文件系统访问API（File System Access API）专属目录授权 #

这个方案完全匹配你要的「单次授权、非全量访问、直接读写二进制文件」的要求，实现逻辑如下：

• 应用首次启动时调用showDirectoryPicker()方法，弹窗提示用户选择一个专门用于存放当前应用数据的空目录，仅获取该目录的读写权限，不会申请全量文件系统访问权限
• 拿到目录句柄后，将句柄存入IndexedDB，同时调用navigator.storage.persist()申请存储持久化权限，后续应用启动时直接从IndexedDB读取已授权的目录句柄即可，不需要重复触发授权弹窗，只要用户不手动撤销权限就可以长期访问该目录
• 读写数据时不需要做格式转换：图片可以直接写入Blob对象，配置数据可以直接存为JSON文本文件，操作逻辑和本地文件系统完全一致

备选方案：Origin私有文件系统（OPFS） #

如果你不需要用户直观看到存入的文件，可以用浏览器给每个源独立分配的沙盒文件系统，实现更简单：

• 不需要用户手动授权目录，调用navigator.storage.getDirectory()即可拿到当前源的私有目录句柄，读写完全沙盒隔离，不会访问到用户其他文件
• 申请navigator.storage.persist()持久化权限后，浏览器不会主动清理该目录下的内容，存储可靠性和用户授权的目录一致，同样支持直接读写二进制数据，不需要转Base64

补充误区纠正 #

IndexedDB本身原生支持直接存储Blob、File等二进制类型对象，不需要转Base64格式，如果你之前仅因为转码繁琐放弃该方案，可以尝试直接存储二进制数据的用法

内容的提问来源于stack exchange，提问作者David Alsh