现代 web 应用（如 vscode.dev）可通过 file system access api 直接读写用户本地文件与目录，无需服务端中转；该 api 提供 `showopenfilepicker` 等方法获取文件句柄，支持重命名、删除、编辑等操作，但需 https 环境且浏览器兼容性有限。
Web 应用传统上受限于同源策略与沙箱机制，无法直接访问本地文件系统——这既是安全基石，也是功能瓶颈。然而，随着 File System Access API 的成熟落地（Chrome 86+、Edge 91+、Firefox 125+ 支持），前端已能以用户显式授权为前提，安全、可控地实现类桌面应用的文件操作能力。
核心机制：从用户授权到文件句柄
与 仅提供一次性只读文件 Blob 不同，File System Access API 的核心在于持久化文件/目录句柄（FileSystemFileHandle / FileSystemDirectoryHandle）。这些句柄本身不包含数据，而是代表用户授权后对特定文件或目录的访问权，可多次复用，并支持读写、重命名、删除等操作。
例如，打开并编辑一个本地文本文件：
// 1. 请求用户选择文件（支持多选、过滤类型）
const [fileHandle] = await window.showOpenFilePicker({
types: [{
description: 'Text files',
accept: { 'text/plain': ['.txt', '.md'] }
}],
multiple: false
});
// 2. 获取可写流并写入新内容
const writable = await fileHandle.createWritable();
await writable.write('Hello from the web!\n');
await writable.close();
console.log('文件已成功写入！');更进一步，你还可以打开整个目录，遍历、创建、重命名甚至删除其中的条目：
// 打开用户选定的目录
const dirHandle = await window.showDirectoryPicker();
// 遍历目录内容
for await (const entry of dirHandle.values()) {
console.log(entry.name, entry.kind); // e.g., "notes.md", "file"
}
// 创建新文件
const newFileHandle = await dirHandle.getFileHandle('new-file.txt', { create: true });
const writable = await newFileHandle.createWritable();
await writable.write('New content');
await writable.close();
// 重命名现有文件（需同目录下操作）
const oldHandle = await dirHandle.getFileHandle('old.txt');
await oldHandle.move(dirHandle, 'renamed.txt');关键前提与注意事项
- ✅ 必须通过 HTTPS 提供服务（包括 localhost，现代浏览器允许 http://localhost 作为例外，但生产环境强制 HTTPS）；
- ✅ 所有操作需用户主动触发（如点击按钮调用 showOpenFilePicker），不可静默执行；
- ⚠️ 权限非永久有效：句柄可能因页面刷新、隐私模式或用户清除站点数据而失效，建议使用 navigator.storage.persist() + persisted() 检查持久化状态，并捕获 InvalidStateError 异常做降级处理；
- ⚠️ 浏览器兼容性有限：Safari 尚未支持；Firefox 仅自 v125 起默认启用；务必在使用前检测 API 可用性：
if ('showOpenFilePicker' in window) {
// 安全调用 API
} else {
alert('当前浏览器不支持本地文件系统访问，请使用 Chrome 或新版 Edge/Firefox。');
}- ? 安全性设计：API 严格遵循“最小权限”原则——每个句柄仅对应用户明确选择的一个文件或目录，且无法越界访问其他路径；所有敏感操作（如删除）仍需用户二次确认（由浏览器 UI 控制）。
总结
File System Access API 并非绕过安全模型的“后门”，而是 Web 平台在用户控制前提下，向高性能、离线优先型应用（如代码编辑器、文档工具、音视频剪辑器）迈出的关键一步。它让 vscode.dev 这样的 Web IDE 成为可能：无需安装、即时启动，却拥有接近原生的文件管理体验。若你的项目需要深度集成本地文件操作，请优先基于此 API 构建，并始终将用户授权、兼容性兜底与错误恢复作为设计核心。
