文件系统标准引入了源专用文件系统 (OPFS) 作为网页源专用且对用户不可见的存储端点，它提供了对性能经过高度优化的特殊文件的可选访问。
浏览器支持
源私有文件系统受新型浏览器支持，并已由 File System Living Standard 中的 Web 超文本应用技术工作组 (WHATWG) 标准化。
设计初衷
想到计算机上的文件时，您可能会想到文件层次结构：以文件夹形式整理的文件，您可以使用操作系统的文件浏览器浏览这些文件。例如，在 Windows 上，对于名叫 Tom 的用户，其待办事项列表可能位于 C:\Users\Tom\Documents\ToDo.txt 中。在此示例中，ToDo.txt 是文件名，Users、Tom 和 Documents 是文件夹名称。“C:”在 Windows 上表示驱动器的根目录。
在网络上处理文件的传统方法
要在 Web 应用中修改待办事项列表，请采用以下常规流程：
- 用户将文件上传到服务器，或使用
<input type="file">在客户端上打开文件。 - 用户进行更改，然后下载包含注入的
<a download="ToDo.txt>（您通过 JavaScript 以编程方式click()）生成的文件。 - 要打开文件夹，您可以在
<input type="file" webkitdirectory>中使用一个特殊属性，尽管该属性具有专有名称，但实际上却拥有通用的浏览器支持。
在网络上处理文件的现代方式
此流程并不代表用户对于修改文件的看法，意味着用户最终会下载其输入文件的副本。因此，File System Access API 引入了三种选择器方法：showOpenFilePicker()、showSaveFilePicker() 和 showDirectoryPicker()，这些方法与其名称所暗示的含义完全相同。它们按如下方式启用数据流：
- 使用
showOpenFilePicker()打开ToDo.txt，并获取FileSystemFileHandle对象。 - 通过调用文件句柄的
getFile()方法，从FileSystemFileHandle对象中获取File。 - 修改文件，然后对句柄调用
requestPermission({mode: 'readwrite'})。 - 如果用户接受权限请求，请将更改保存回原始文件。
- 或者，调用
showSaveFilePicker()并让用户选择一个新文件。（如果用户选择之前打开的文件，其内容将被覆盖。）对于重复保存，您可以保留文件句柄，这样您就不必再次显示文件保存对话框。
与使用网页版文件相关的限制
可通过这些方法访问的文件和文件夹位于所谓的用户可见文件系统中。从网络中保存的文件（尤其是可执行文件）会标有网络标记，因此操作系统可能会在可能不安全的文件得到执行之前显示额外的警告。安全浏览是一项额外的安全功能，从网上获取的文件也受到安全浏览功能的保护。为简单起见，本文也可以将该功能视为云端病毒扫描。当您使用 File System Access API 将数据写入文件时，写入操作不会就位，而是使用临时文件。除非文件通过了所有安全检查，否则文件本身不会被修改。可以想象，尽管已尽可能进行了改进（例如在 macOS 上），这种工作会使文件操作相对变慢。不过，每个 write() 调用都是独立的，因此它会在后台打开文件，查找指定的偏移量，并最终写入数据。
将文件作为处理的基础
同时，文件也是记录数据的绝佳方式。例如，SQLite 会将整个数据库存储在单个文件中。另一个示例是图片处理中使用的 mipmap。mipmap 是预先计算和优化的图片序列，其中每个图像的分辨率都逐次降低，这使得缩放等许多操作变得更加快速。那么，网页应用该如何获得文件的优势，同时又不会降低基于网络的文件处理性能呢？答案是源专用文件系统。
用户可见的与源私有文件系统的对比
与用户可见的文件系统（通过操作系统的文件浏览器浏览）不同，用户可以读取、写入、移动和重命名文件和文件夹，而源私有文件系统不会向用户显示。顾名思义，源私有文件系统中的文件和文件夹是私有的，更具体地说，对网站的来源私有。在开发者工具控制台中输入 location.origin 可发现页面的来源。例如，网页 https://developer.chrome.com/articles/ 的来源为 https://developer.chrome.com（也就是说，/articles 部分不属于来源）。如需详细了解起源理论，请参阅了解“同网站”和“同源”。共享同一来源的所有网页都可以看到同一源私有文件系统数据，因此 https://developer.chrome.com/docs/extensions/mv3/getstarted/extensions-101/ 可以看到与上一个示例相同的详细信息。每个来源都有自己独立的源专用文件系统，这意味着 https://developer.chrome.com 的源专用文件系统与 https://web.dev 等完全不同。在 Windows 上，用户可见文件系统的根目录为 C:\\。对源私有文件系统的等效项是，对于每个源，通过调用异步方法 navigator.storage.getDirectory() 进行访问时，其根目录最初为空。如需查看用户可见文件系统和源私有文件系统的比较，请参阅下图。该图显示，除了根目录之外，其他所有内容在概念上都相同，并且具有文件和文件夹层次结构，可根据您的数据和存储需求进行整理和排列。
源私有文件系统的具体说明
与浏览器中的其他存储机制（例如 localStorage 或 IndexedDB）一样，源私有文件系统也受浏览器配额限制。当用户清除所有浏览数据或所有网站数据时，源私有文件系统也会被删除。调用 navigator.storage.estimate()，然后在生成的响应对象中查看 usage 条目，以查看应用已经占用了多少存储空间；该条目按 usageDetails 对象中的存储机制细分，并且您希望专门查看 fileSystem 条目。由于用户看不到源私有文件系统，因此系统不会显示权限提示，也不会进行安全浏览检查。
获取根目录的访问权限
如需访问根目录，请运行以下命令。您最终会获得一个空的目录句柄，更具体地说，就是一个 FileSystemDirectoryHandle。
const opfsRoot = await navigator.storage.getDirectory();
// A FileSystemDirectoryHandle whose type is "directory"
// and whose name is "".
console.log(opfsRoot);
主线程或 Web Worker
使用源私有文件系统的方法有两种：在主线程中使用或在 Web Worker 中使用。Web Worker 不能阻塞主线程，这意味着在此上下文中，API 可以是同步的，主线程上通常不支持这种模式。同步 API 的速度更快，因为它们不必处理 promise，而且文件操作在 C 等可编译为 WebAssembly 的语言中通常是同步的。
// This is synchronous C code.
FILE *f;
f = fopen("example.txt", "w+");
fputs("Some text\n", f);
fclose(f);
如果您需要以最快的速度执行文件操作，或者正在处理 WebAssembly，请跳至在 Web Worker 中使用源私有文件系统。否则，您可以继续阅读。
在主线程上使用源专用文件系统
创建新文件和文件夹
创建根文件夹后，请分别使用 getFileHandle() 和 getDirectoryHandle() 方法创建文件和文件夹。通过传递 {create: true}，系统将创建文件或文件夹（如果不存在）。以新创建的目录为起点调用这些函数，以构建文件层次结构。
const fileHandle = await opfsRoot
.getFileHandle('my first file', {create: true});
const directoryHandle = await opfsRoot
.getDirectoryHandle('my first folder', {create: true});
const nestedFileHandle = await directoryHandle
.getFileHandle('my first nested file', {create: true});
const nestedDirectoryHandle = await directoryHandle
.getDirectoryHandle('my first nested folder', {create: true});
访问现有文件和文件夹
如果您知道之前创建的文件和文件夹的名称，请调用 getFileHandle() 或 getDirectoryHandle() 方法并传入文件或文件夹的名称，以访问这些文件和文件夹。
const existingFileHandle = await opfsRoot.getFileHandle('my first file');
const existingDirectoryHandle = await opfsRoot
.getDirectoryHandle('my first folder');
获取与文件句柄相关联的文件以进行读取
FileSystemFileHandle 表示文件系统上的文件。如需获取关联的 File，请使用 getFile() 方法。File 对象是 Blob 的一种特定类型，可在 Blob 能够使用的任何上下文中使用。具体而言，FileReader、URL.createObjectURL()、createImageBitmap() 和 XMLHttpRequest.send() 同时接受 Blobs 和 Files。如果需要，从 FileSystemFileHandle 获取 File 会“释放”数据，以便您可以访问这些数据，并将其提供给用户可见的文件系统。
const file = await fileHandle.getFile();
console.log(await file.text());
通过流式传输写入文件
通过调用 createWritable() 将数据流式传输到文件中，该方法会创建一个 FileSystemWritableFileStream 并由您对其进行 write() 操作。最后，您需要对数据流进行 close()。
const contents = 'Some text';
// Get a writable stream.
const writable = await fileHandle.createWritable();
// Write the contents of the file to the stream.
await writable.write(contents);
// Close the stream, which persists the contents.
await writable.close();
删除文件和文件夹
如需删除文件和文件夹，请调用其文件或目录句柄的特定 remove() 方法。如需删除包含所有子文件夹的文件夹，请传递 {recursive: true} 选项。
await fileHandle.remove();
await directoryHandle.remove({recursive: true});
或者，如果您知道目录中待删除的文件或文件夹的名称，请使用 removeEntry() 方法。
directoryHandle.removeEntry('my first nested file');
移动和重命名文件和文件夹
使用 move() 方法重命名和移动文件和文件夹。迁移和重命名可以同时进行，也可以单独进行。
// Rename a file.
await fileHandle.move('my first renamed file');
// Move a file to another directory.
await fileHandle.move(nestedDirectoryHandle);
// Move a file to another directory and rename it.
await fileHandle
.move(nestedDirectoryHandle, 'my first renamed and now nested file');
解析文件或文件夹的路径
如需了解给定文件或文件夹相对于引用目录的位置，请使用 resolve() 方法并向其传递 FileSystemHandle 作为实参。如需获取源私有文件系统中文件或文件夹的完整路径，请将根目录用作通过 navigator.storage.getDirectory() 获取的参考目录。
const relativePath = await opfsRoot.resolve(nestedDirectoryHandle);
// `relativePath` is `['my first folder', 'my first nested folder']`.
检查两个文件或文件夹句柄是否指向同一文件或文件夹
有时，您有两个标识名，不知道它们是否指向同一个文件或文件夹。如需检查是否属于这种情况，请使用 isSameEntry() 方法。
fileHandle.isSameEntry(nestedFileHandle);
// Returns `false`.
列出文件夹的内容
FileSystemDirectoryHandle 是一个异步迭代器，您可以使用 for await…of 循环对其进行迭代。作为异步迭代器，它还支持 entries()、values() 和 keys() 方法，您可以根据自己需要的信息从这些方法中进行选择：
for await (let [name, handle] of directoryHandle) {}
for await (let [name, handle] of directoryHandle.entries()) {}
for await (let handle of directoryHandle.values()) {}
for await (let name of directoryHandle.keys()) {}
以递归方式列出某个文件夹及其所有子文件夹的内容
在处理异步循环以及与递归搭配使用的函数时，很容易出错。您可以利用以下函数作为列出文件夹及其所有子文件夹的内容（包括所有文件及其大小）的起点。如果您不需要文件大小，可以通过显示 directoryEntryPromises.push 来简化该函数，而不是推送 handle.getFile() promise，而是直接推送 handle。
const getDirectoryEntriesRecursive = async (
directoryHandle,
relativePath = '.',
) => {
const fileHandles = [];
const directoryHandles = [];
const entries = {};
// Get an iterator of the files and folders in the directory.
const directoryIterator = directoryHandle.values();
const directoryEntryPromises = [];
for await (const handle of directoryIterator) {
const nestedPath = `${relativePath}/${handle.name}`;
if (handle.kind === 'file') {
fileHandles.push({ handle, nestedPath });
directoryEntryPromises.push(
handle.getFile().then((file) => {
return {
name: handle.name,
kind: handle.kind,
size: file.size,
type: file.type,
lastModified: file.lastModified,
relativePath: nestedPath,
handle
};
}),
);
} else if (handle.kind === 'directory') {
directoryHandles.push({ handle, nestedPath });
directoryEntryPromises.push(
(async () => {
return {
name: handle.name,
kind: handle.kind,
relativePath: nestedPath,
entries:
await getDirectoryEntriesRecursive(handle, nestedPath),
handle,
};
})(),
);
}
}
const directoryEntries = await Promise.all(directoryEntryPromises);
directoryEntries.forEach((directoryEntry) => {
entries[directoryEntry.name] = directoryEntry;
});
return entries;
};
在 Web Worker 中使用源专用文件系统
如前所述，Web Worker 无法阻塞主线程，因此在此上下文中允许使用同步方法。
获取同步访问句柄
最快文件操作的入口点是 FileSystemSyncAccessHandle，可通过调用 createSyncAccessHandle() 从常规 FileSystemFileHandle 中获取。
const fileHandle = await opfsRoot
.getFileHandle('my highspeed file.txt', {create: true});
const syncAccessHandle = await fileHandle.createSyncAccessHandle();
同步就地文件方法
有了同步访问句柄，您就可以访问所有同步的快速就地文件方法。
getSize()：返回文件的大小（以字节为单位）。write()：将缓冲区的内容写入文件（可选择在给定偏移量处写入），并返回写入的字节数。检查返回的写入字节数可让调用方检测和处理错误及部分写入。read()：将文件内容读取到缓冲区中（可以选择在给定偏移量处）。truncate()：将文件大小调整为指定大小。flush()：确保文件内容包含通过write()完成的所有修改。close()：关闭访问句柄。
下面是一个使用上述所有方法的示例。
const opfsRoot = await navigator.storage.getDirectory();
const fileHandle = await opfsRoot.getFileHandle('fast', {create: true});
const accessHandle = await fileHandle.createSyncAccessHandle();
const textEncoder = new TextEncoder();
const textDecoder = new TextDecoder();
// Initialize this variable for the size of the file.
let size;
// The current size of the file, initially `0`.
size = accessHandle.getSize();
// Encode content to write to the file.
const content = textEncoder.encode('Some text');
// Write the content at the beginning of the file.
accessHandle.write(content, {at: size});
// Flush the changes.
accessHandle.flush();
// The current size of the file, now `9` (the length of "Some text").
size = accessHandle.getSize();
// Encode more content to write to the file.
const moreContent = textEncoder.encode('More content');
// Write the content at the end of the file.
accessHandle.write(moreContent, {at: size});
// Flush the changes.
accessHandle.flush();
// The current size of the file, now `21` (the length of
// "Some textMore content").
size = accessHandle.getSize();
// Prepare a data view of the length of the file.
const dataView = new DataView(new ArrayBuffer(size));
// Read the entire file into the data view.
accessHandle.read(dataView);
// Logs `"Some textMore content"`.
console.log(textDecoder.decode(dataView));
// Read starting at offset 9 into the data view.
accessHandle.read(dataView, {at: 9});
// Logs `"More content"`.
console.log(textDecoder.decode(dataView));
// Truncate the file after 4 bytes.
accessHandle.truncate(4);
将文件从源专用文件系统复制到用户可见的文件系统
如上所述，您无法将文件从源私有文件系统移至用户可见的文件系统，但您可以复制文件。由于 showSaveFilePicker() 仅在主线程上公开，而不会在工作器线程中公开，因此请确保在该线程中运行代码。
// On the main thread, not in the Worker. This assumes
// `fileHandle` is the `FileSystemFileHandle` you obtained
// the `FileSystemSyncAccessHandle` from in the Worker
// thread. Be sure to close the file in the Worker thread first.
const fileHandle = await opfsRoot.getFileHandle('fast');
try {
// Obtain a file handle to a new file in the user-visible file system
// with the same name as the file in the origin private file system.
const saveHandle = await showSaveFilePicker({
suggestedName: fileHandle.name || ''
});
const writable = await saveHandle.createWritable();
await writable.write(await fileHandle.getFile());
await writable.close();
} catch (err) {
console.error(err.name, err.message);
}
调试源专用文件系统
在添加内置开发者工具支持（请参阅 crbug/1284595）之前，请使用 OPFS Explorer Chrome 扩展程序调试源私有文件系统。顺便提一下，上面创建新文件和文件夹部分的屏幕截图是直接从扩展程序截取的。
安装扩展程序后，打开 Chrome 开发者工具，选择 OPFS Explorer 标签页，即可检查文件层次结构。点击文件名，将文件从源私有文件系统保存到用户可见的文件系统，然后点击回收站图标删除文件和文件夹。
演示
通过演示查看源私有文件系统的实际运行（如果您安装了 OPFS Explorer 扩展程序），该演示将其用作已编译为 WebAssembly 的 SQLite 数据库的后端。请务必查看 Glitch 上的源代码。请注意，以下嵌入版本并不使用源私有文件系统后端（因为 iframe 是跨源的），但当您在单独的标签页中打开演示时，它会使用。
总结
WHATWG 中指定的源私有文件系统影响了我们使用网络上的文件以及与之互动的方式。它实现了通过用户可见的文件系统无法实现的新用例。所有主流浏览器供应商（Apple、Mozilla 和 Google）均已加入，并且拥有共同的愿景。源私有文件系统的开发离不开我们的通力协作，开发者和用户的反馈对它的进展至关重要。随着我们不断优化和改进该标准，欢迎您以“问题”或“拉取请求”的形式针对 whatwg/fs 代码库提供反馈。
相关链接
致谢
本文由 Austin Sully、Etienne Noël 和 Rachel Andrew 审核。主打图片由 Christina Rumpf 拍摄，来源：Unsplash 用户。