File System Access API 与 OPFS 权限与兼容性

`title: File System Access API 与 OPFS 权限与兼容性``categories: Web 开发/前端/数据管理``keywords: File System Access API,OPFS,权限,兼容性,安全,性能``description: 介绍 OPFS 的能力与在主线程/Worker 的读写方式、权限模型与兼容性检测，并提供经过验证的代码片段与回退方案。`OPFS 是什么OPFS（Origin Private File System）为站点提供隔离的私有文件系统，适合大型二进制或文档持久化。兼容性与检测特性检测：`navigator.storage && navigator.storage.getDirectory`。Chromium 系列稳定支持；Firefox/Safari 新版逐步支持，建议运行时检测并回退。async function hasOPFS() { return !!(navigator.storage && navigator.storage.getDirectory); } 主线程写入（异步流）async function writeTextFile(name, content) { const root = await navigator.storage.getDirectory(); const handle = await root.getFileHandle(name, { create: true }); const writable = await handle.createWritable(); await writable.write(new Blob([content], { type: 'text/plain; charset=utf-8' })); await writable.close(); } Worker 中的同步句柄`FileSystemSyncAccessHandle` 仅在 `DedicatedWorker` 或 `SharedWorker` 可用，避免主线程阻塞。// worker.js self.addEventListener('message', async (e) => { const { name, bytes } = e.data; const root = await navigator.storage.getDirectory(); const handle = await root.getFileHandle(name, { create: true }); const sync = await handle.createSyncAccessHandle(); try { const written = sync.write(bytes); // Uint8Array sync.flush(); self.postMessage({ ok: true, written }); } finally { sync.close(); } }); 权限与安全OPFS 不需要用户选择文件对话框；由站点沙箱管理，跨站不可见。清理：通过 `root.removeEntry(name, { recursive: true })` 删除；遵守隐私策略与配额管理。回退方案无 OPFS 时：使用 IndexedDB 存储二进制（Blob）或分块；或使用 Cache Storage 缓存静态资产。