J*aScript文件系统访问API

技术教程
2025-10-16 11:21:02

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

javascript文件系统访问api

J*aScript 文件系统访问 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. 保存内容到文件

使用 showS*eFilePicker() 获取一个可写文件句柄：

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

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

3. 编辑已有文件并保存

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

I-Shop购物系统

部分功能简介：商品收藏夹功能热门商品最新商品分级价格功能自选风格打印结算页面内部短信箱商品评论增加上一商品，下一商品功能增强商家提示功能友情链接用户在线统计用户来访统计用户来访信息用户积分功能广告设置用户组分类邮件系统后台实现更新用户数据系统图片设置模板管理CSS风格管理申诉内容过滤功能用户注册过滤特征字符IP库管理及来访限制及管理压缩，恢复，备份数据库功能上传文件管理商品类别管理商品添加/修改/

0 查看详情 I-Shop购物系统

async function editAndS*e(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' });
}