现代 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 缓存），兼顾兼容性与用户体验。
