Web 端的“资源管理器”

除了读写单个文件，File System API 还能让你直接操作本地目录，实现复杂的文件结构扫描和工程化管理。

文件处理

支持读取、创建、删除以及流式写入本地文件。

目录树扫描

递归遍历文件夹，获取目录下所有子项，构建 Web 侧的文件树。

持久化权限

在获得用户许可后，可以跨会话保留对文件夹的访问能力。

Advanced Directory Explorer Demo

选择一个文件夹以递归列出内容

尚未加载目录
未打开文件

/ 进阶 API：目录操作

DIR

showDirectoryPicker()

允许用户选择一个文件夹，并返回一个 FileSystemDirectoryHandle。该句柄是访问整个目录树的入口。

// 弹出文件夹选择器
const dirHandle = await window.showDirectoryPicker();

// 递归扫描目录内容
async function scanDirectory(handle) {
  for await (const entry of handle.values()) {
    if (entry.kind === 'directory') {
      console.log('文件夹:', entry.name);
      await scanDirectory(entry); // 递归
    } else {
      console.log('文件:', entry.name);
    }
  }
}

句柄类型对照

FileSystemHandle 基类
FileSystemFileHandle 单个文件
FileSystemDirectoryHandle 文件夹容器

你可以通过 getDirectoryHandle() 或 getFileHandle() 在已知路径下精准获取特定的子项。

这些方法还支持参数 { create: true }，这意味着你可以直接在 Web 端像原生程序一样生成复杂的目录结构。

高级安全特性

作用域限制

浏览器不允许 Web 访问系统级敏感目录（如 C:/Windows 或库文件），确保即使恶意站点获得了权限，也无法破坏操作系统。

权限持久化

用户授予的权限通常在会话结束（关闭标签页）后过期。但利用 IndexedDB 存储句柄，可以在下次访问时请求“恢复访问”，提升用户体验。