如何让 Web 应用安全、直接地访问和操作本地文件系统

现代 web 应用可通过 file system access api 实现对本地文件和目录的读写、重命名、删除等操作，无需 后端 代理，但需 https 环境与用户显式授权。

Web 应用传统上受限于沙箱安全模型，无法直接访问本地文件系统——这既是保护用户隐私的关键机制，也长期制约了桌面级体验的实现。然而，随着 File System Access API 的逐步落地（Chrome 86+、Edge 92+、Firefox 125+ 支持），这一限制已被安全、可控地突破。

该 API 的核心在于 以用户主动授权为前提，通过一系列异步方法获取对文件或目录的持久化句柄（FileSystemFileHandle 或 FileSystemDirectoryHandle），而非一次性读取文件内容。例如：

// 打开单个文件（支持多选）const [fileHandle] = await window.showOpenFilePicker({multiple: false,   types: [{     description: 'Text files',     accept: { 'text/plain': ['.txt'] }   }] });  // 获取可写流并保存新内容 const writable = await fileHandle.createWritable(); await writable.write('Hello from the web!'); await writable.close();

对于目录操作（如 VS Code Web 版所依赖的功能），可调用 showDirectoryPicker()：

const dirHandle = await window.showDirectoryPicker(); for await (const entry of dirHandle.values()) {console.log(entry.name, entry.kind === 'file' ? 'file' : 'directory'); }

⚠️ 关键注意事项：

• ✅ 必须运行在 HTTPS 环境下（localhost 除外，但需确保开发服务器启用 TLS 或使用 http://localhost）；
• ✅ 所有操作均为 用户手势触发（如点击按钮），不可静默执行；
• ❌ 不支持 跨域 iframe 中调用；
• ? 浏览器 兼容性有限：目前 Chrome/Edge 主流支持，Firefox 逐步完善，Safari 尚未实现（截至 2024 年）；
• ? 句柄不具备路径字符串，无法绕过权限模型——每个操作均需用户再次确认（首次授权后可勾选“记住此选择”以减少提示频次）。

总结而言，File System Access API 并非替代 ，而是其能力的延伸：它将临时文件读取升级为 可持久化、可写入、可遍历的文件系统交互 ，是构建 Web IDE、本地文档编辑器、离线素材管理 工具 等高性能客户端应用的技术基石。实际开发中，建议结合特性检测与降级方案（如 input[type=file] + IndexedDB 缓存），兼顾兼容性与用户体验。