JavaScript文件系统访问API_技术教程

File System Access API 允许现代浏览器直接操作本地文件，支持打开、读取、写入、保存及创建文件和遍历目录。1. 使用 showOpenFilePicker 选择并读取文本文件；2. 通过 showSaveFilePicker 创建新文件并保存内容；3. 利用已有句柄编辑并写回原文件；4. 调用 showDirectoryPicker 遍历目录中的文件。所有操作需用户触发，确保安全，且可请求持久化权限。适用于代码编辑器、笔记应用等场景，提升 Web 应用体验。

JavaScript 文件系统访问 API（File System Access API）让网页可以直接与用户设备上的文件和目录交互，提供更接近原生应用的体验。它允许用户选择文件、读取、写入、保存甚至创建新文件，而无需依赖传统的 input[type=file] 或下载链接。

支持的功能

该 API 主要适用于现代 Chromium 浏览器（如 Chrome 86+、Edge 86+），目前在 Firefox 和 Safari 中暂不支持或处于实验阶段。

核心功能包括：

打开本地文件并读取内容
将更改保存回同一个文件
创建新文件并保存到用户指定位置
访问和遍历目录中的文件
监听文件变化（未来可能支持）

基本使用方法

以下是常见操作的代码示例。

1. 打开一个文本文件

使用 window.showOpenFilePicker() 让用户选择文件：

async function openFile() {
  try {
    const [fileHandle] = await window.showOpenFilePicker({
      types: [{
        description: 'Text files',
        accept: { 'text/plain': ['.txt'] }
      }]
    });
    const file = await fileHandle.getFile();
    const content = await file.text();
    return content;
  } catch (err) {
    console.error('用户取消或发生错误', err);
  }
}

2. 保存内容到文件

使用 showSaveFilePicker() 获取一个可写文件句柄：

async function saveFile(content) {
  const fileHandle = await window.showSaveFilePicker({
    suggestedName: 'untitled.txt',
    types: [{
      description: 'Text files',
      accept: { 'text/plain': ['.txt'] }
    }]
  });

  const writable = await fileHandle.createWritable();
  await writable.write(content);
  await writable.close();
}

3. 编辑已有文件并保存

如果已经有一个文件句柄，可以直接写回：

async function editAndSave(fileHandle, newContent) {
  const writable = await fileHandle.createWritable();
  await writable.write(newContent);
  await writable.close();
}

4. 读取目录内容

使用 showDirectoryPicker() 选择文件夹：

async function readDirectory() {
  const dirHandle = await window.showDirectoryPicker();

  for await (const entry of dirHandle.values()) {
    if (entry.kind === 'file') {
      const file = await entry.getFile();
      console.log(file.name);
    }
  }
}

安全与权限

出于安全考虑，所有操作都需要用户主动触发（如点击按钮），不能自动执行。浏览器会弹出系统级对话框，确保用户知情并授权。

一旦获得文件或目录句柄，可在会话中重复使用，但持久化访问需要请求权限：

const permission = await fileHandle.queryPermission({ mode: 'readwrite' });
if (permission !== 'granted') {
  await fileHandle.requestPermission({ mode: 'readwrite' });
}