FileSystemObserver

安全上下文: 此项功能仅在一些支持的浏览器的安全上下文（HTTPS）中可用。

实验性: 这是一项实验性技术
在将其用于生产之前，请仔细检查浏览器兼容性表格。

非标准: 该特性是非标准的，请尽量不要在生产环境中使用它！

文件系统 API 的 FileSystemObserver 接口提供了一种可以观察用户可观察的文件系统和源私有文件系统（OPFS）的变化的机制。这意味着 Web 应用程序无需轮询文件系统来查找文件或文件夹结构的更改，从而避免耗时和浪费资源。

构造函数

FileSystemObserver()

创建一个新的 FileSystemObserver 对象实例。

实例方法

disconnect()

停止观察文件系统。

observe()

开始观察给定文件或目录的变化。

示例

备注： 有关完整的工作示例，请查看文件系统观察器示例（源代码）。

初始化 FileSystemObserver

在开始观察文件或目录更改之前，你需要初始化一个 FileSystemObserver 来处理这些观察结果。这可以通过 FileSystemObserver() 构造函数来完成，该构造函数接受一个回调函数作为参数：

js
const observer = new FileSystemObserver(callback);

你可以指定回调函数主体，以任何你想要的方式返回和处理文件更改观察结果：

js
const callback = (records, observer) => {
  for (const record of records) {
    console.log("检测到的变化：", record);
    const reportContent = `观察到的变更为 ${record.changedHandle.kind} ${record.changedHandle.name}。类型：${record.type}。`;
    sendReport(reportContent); // 某种用户定义的报告函数
  }

  observer.disconnect();
};

观察文件或目录

一旦 FileSystemObserver 实例可用，你就可以通过调用 FileSystemObserver.observe() 方法开始观察文件系统条目的变化。

你可以通过向 observe() 传入 FileSystemFileHandle 或 FileSystemDirectoryHandle 来观察用户可观察文件系统或源私有文件系统（OPFS）中的文件或目录。例如，当要求用户使用 Window.showSaveFilePicker() 或 Window.showDirectoryPicker() 选择文件或目录时，可以返回这些对象的实例：

js
// 观察文件
async function observeFile() {
  const fileHandle = await window.showSaveFilePicker();

  await observer.observe(fileHandle);
}

// 观察目录
async function observeDirectory() {
  const directoryHandle = await window.showDirectoryPicker();

  await observer.observe(directoryHandle);
}

你还可以通过将 FileSystemSyncAccessHandle 传递给 observe() 来观察 OPFS 的变化：

js
// 观察 OPFS 文件系统条目
async function observeOPFSFile() {
  const root = await navigator.storage.getDirectory();
  const draftHandle = await root.getFileHandle("draft.txt", { create: true });
  const syncHandle = await draftHandle.createSyncAccessHandle();

  await observer.observe(syncHandle);
}

停止观察文件系统

当你想要停止观察文件系统条目的变化时，可以调用 FileSystemObserver.disconnect()：

js
observer.disconnect();

规范

目前不属于任何规范。相关规范 PR 请参阅 https://github.com/whatwg/fs/pull/165。

浏览器兼容性

参见