File System Access API 允許現(xiàn)代瀏覽器直接操作本地文件，支持打開、讀取、寫入、保存及創(chuàng)建文件和遍歷目錄。1. 使用 showOpenFilePicker 選擇并讀取文本文件；2. 通過 showSaveFilePicker 創(chuàng)建新文件并保存內(nèi)容；3. 利用已有句柄編輯并寫回原文件；4. 調(diào)用 showDirectoryPicker 遍歷目錄中的文件。所有操作需用戶觸發(fā)，確保安全，且可請求持久化權(quán)限。適用于代碼編輯器、筆記應(yīng)用等場景，提升 Web 應(yīng)用體驗。

JavaScript 文件系統(tǒng)訪問 API（File System Access API）讓網(wǎng)頁可以直接與用戶設(shè)備上的文件和目錄交互，提供更接近原生應(yīng)用的體驗。它允許用戶選擇文件、讀取、寫入、保存甚至創(chuàng)建新文件，而無需依賴傳統(tǒng)的 input[type=file] 或下載鏈接。

支持的功能

該 API 主要適用于現(xiàn)代 Chromium 瀏覽器（如 Chrome 86+、Edge 86+），目前在 Firefox 和 Safari 中暫不支持或處于實驗階段。

核心功能包括：

• 打開本地文件并讀取內(nèi)容
• 將更改保存回同一個文件
• 創(chuàng)建新文件并保存到用戶指定位置
• 訪問和遍歷目錄中的文件
• 監(jiān)聽文件變化（未來可能支持）

基本使用方法

以下是常見操作的代碼示例。

立即學(xué)習(xí)“Java免費(fèi)學(xué)習(xí)筆記（深入）”；

使用 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('用戶取消或發(fā)生錯誤', err);
  }
}

使用 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();
}

如果已經(jīng)有一個文件句柄，可以直接寫回：

問問小宇宙

問問小宇宙是小宇宙團(tuán)隊出品的播客AI檢索工具

77

查看詳情

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

使用 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);
    }
  }
}

安全與權(quán)限

出于安全考慮，所有操作都需要用戶主動觸發(fā)（如點(diǎn)擊按鈕），不能自動執(zhí)行。瀏覽器會彈出系統(tǒng)級對話框，確保用戶知情并授權(quán)。

一旦獲得文件或目錄句柄，可在會話中重復(fù)使用，但持久化訪問需要請求權(quán)限：

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

實際應(yīng)用場景

這個 API 特別適合以下類型的應(yīng)用：

• 代碼編輯器（如在線 IDE）
• 筆記應(yīng)用（直接保存為 .md 文件）
• 圖像/音頻元數(shù)據(jù)編輯器
• 配置文件管理工具

基本上就這些。只要瀏覽器支持，F(xiàn)ile System Access API 能極大提升 Web 應(yīng)用的操作能力和用戶體驗，讓網(wǎng)頁更像本地程序。不過要注意兼容性，并為不支持的環(huán)境準(zhǔn)備降級方案（比如傳統(tǒng) input + download）。

以上就是JavaScript文件系統(tǒng)訪問API的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！