FileSystem Access API：如何获取已添加目录及目录列表？

为什么你的代码找不到目录？ #

showDirectoryPicker获取的是用户本地文件系统的目录句柄，而navigator.storage.getDirectory()访问的是浏览器专属的OPFS私有文件系统——这俩是完全独立的存储空间，所以你在OPFS里根本找不到之前选的本地目录，这不是代码错了，是找错地方了。

正确步骤：保存、恢复已选目录 #

1. 保存已获取的目录句柄 #

选完目录后，把它序列化后存在本地存储（推荐用localStorage快速存储，或IndexedDB存大量条目），示例代码：

try {
  // 先申请持久化存储权限，避免浏览器自动清除数据
  const isPersisted = await navigator.storage.persist();
  if (!isPersisted) {
    console.log("存储未持久化，数据可能会被浏览器清除");
  }

  const directoryHandle = await showDirectoryPicker({
    startIn: startIn.value,
  });

  // 序列化目录句柄
  const serializedHandle = await directoryHandle.serialize();
  // 以目录名为标识，存在localStorage中
  localStorage.setItem(`saved-dir-${directoryHandle.name}`, JSON.stringify(serializedHandle));

  // 原有的目录内容遍历逻辑
  for await (const [name, fileHandle] of directoryHandle) {
    directory.textContent += `${name} - ${fileHandle.kind}\n`;
  }
} catch (e) {
  console.log(e);
}

2. 恢复已保存的目录句柄 #

之后需要重新获取该目录时，从存储中取出序列化数据反序列化即可：

try {
  // 替换成你保存时用的目录名标识
  const serializedStr = localStorage.getItem(`saved-dir-目标目录名`);
  if (!serializedStr) {
    console.log("没有找到已保存的目录");
    return;
  }

  const serializedHandle = JSON.parse(serializedStr);
  // 反序列化恢复目录句柄
  const existingDirectoryHandle = await FileSystemDirectoryHandle.deserialize(serializedHandle);

  // 恢复后即可正常操作目录，比如遍历内容
  for await (const [name, fileHandle] of existingDirectoryHandle) {
    console.log(`${name} - ${fileHandle.kind}`);
  }
} catch (e) {
  console.log(e);
}

列出所有已添加的目录 #

遍历localStorage中所有以saved-dir-开头的存储条目，逐个恢复并列出：

async function listSavedDirectories() {
  const savedDirs = [];
  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    if (key.startsWith('saved-dir-')) {
      const serializedStr = localStorage.getItem(key);
      const serializedHandle = JSON.parse(serializedStr);
      const dirHandle = await FileSystemDirectoryHandle.deserialize(serializedHandle);
      savedDirs.push({
        name: dirHandle.name,
        handle: dirHandle
      });
    }
  }

  // 输出所有已保存的目录
  console.log("已添加的目录列表：");
  savedDirs.forEach(dir => console.log(dir.name));
  return savedDirs;
}

// 调用函数获取列表
listSavedDirectories();

注意事项 #

• 如果用户撤销了网站对该目录的访问权限，反序列化时会抛出错误，需要捕获并提示用户重新选择目录。
• 只要用户不清除浏览器数据、不撤销权限，序列化的目录句柄可以长期使用。

内容的提问来源于stack exchange，提问作者Sergey