HTML5: FileSystem API - 创建文件并将其本地存储

FileSystem API 是 HTML5 提供的一项功能，允许开发者通过 JavaScript 创建文件和文件夹并将其存储在本地。它支持存储简单的文本文件以及更复杂的文件类型（如图像）。目前，支持 HTML5 的现代 Webkit 浏览器已经能够处理 FileSystem API。本文将为您详细介绍如何利用这一功能。

访问本地文件系统

为了实现从 Web 浏览器内部将文件和文件夹保存到本地硬盘，必须先访问文件系统。然而，由于这可能带来潜在的安全风险，默认情况下是不允许的。FileSystem API 作为一种折衷方案，仅允许访问由浏览器控制的本地驱动器上的特定保护区域，用户只能在该区域内进行读写操作，而无法访问整个本地驱动器。

FileSystem API 提供两种存储方式：

• 临时存储：数据仅在当前会话中有效。
• 永久存储：需要用户明确授权，数据会一直保留，直到用户或网站主动删除。

以下是创建存储空间的代码示例：

window.webkitRequestFileSystem(window.TEMPORARY, 1024 * 1024, SaveDatFileBro);
window.webkitRequestFileSystem(window.PERSISTENT, 1024 * 1024, SaveDatFileBro);

通过 webkitRequestFileSystem() 方法，可以选择创建临时存储（window.TEMPORARY）或永久存储（window.PERSISTENT），并分配所需的存储空间（如上例中为 1 MB）。Chrome 浏览器允许临时存储最多占用可用磁盘空间的 50%，但每个网站只能使用其中的 20%。

对于永久存储，需要先请求用户授权：

navigator.webkitPersistentStorage.requestQuota(1024 * 1024, function() {
  window.webkitRequestFileSystem(window.PERSISTENT, 1024 * 1024, SaveDatFileBro);
});

上述代码通过 webkitPersistentStorage.requestQuota() 请求用户授权，授权成功后再调用 webkitRequestFileSystem() 分配存储空间。

需要注意的是，FileSystem API 遵循同源策略，即只有创建文件的同一网站可以访问这些文件。此外，目前该 API 仅适用于 Chrome 浏览器，并依赖供应商前缀。

创建文件并填充内容

在获得存储空间访问权限后，可以使用 getFile() 方法创建文件并写入内容。例如：

function SaveDatFileBro(localstorage) {
  localstorage.root.getFile("info.txt", { create: true });
}

在上述代码中，localstorage.root.getFile() 方法用于访问文件系统的根目录，并创建名为 info.txt 的文件。create: true 参数表示如果文件不存在则创建它。

要向文件写入内容，可以使用以下代码：

function SaveDatFileBro(localstorage) {
  localstorage.root.getFile("info.txt", { create: true }, function(DatFile) {
    DatFile.createWriter(function(DatContent) {
      var blob = new Blob(["Lorem Ipsum"], { type: "text/plain" });
      DatContent.write(blob);
    });
  });
}

在此示例中，createWriter() 方法用于创建一个写入器，并通过 Blob 对象将内容写入文件。Blob 是一种包含文本、图像或其他数据的二进制大对象。

如果需要删除文件，可以使用 remove() 方法：

function SaveDatFileBro(localstorage) {
  localstorage.root.getFile("info.txt", { create: false }, function(DatFile) {
    DatFile.remove(function() {});
  });
}

创建文件夹

类似于文件的操作，可以使用 getDirectory() 方法创建文件夹：

function SaveDatFileBro(localstorage) {
  localstorage.root.getDirectory("demo", { create: true }, function() {});
}

上述代码创建了一个名为 demo 的文件夹。之后，可以在该文件夹中创建文件：

function SaveDatFileBro(localstorage) {
  localstorage.root.getFile("/demo/info.txt", { create: true });
}

在尝试向文件夹中写入内容之前，务必确保文件夹已存在。

此外，可以使用 moveTo() 方法将文件从一个文件夹移动到另一个文件夹，或重命名文件。例如：

function SaveDatFileBro(localstorage) {
  localstorage.root.getFile("info.txt", {}, function(DatFile) {
    localstorage.root.getDirectory("demo/", {}, function(DatFolder) {
      DatFile.moveTo(DatFolder);
    });
  });
}

重命名文件的代码如下：

function SaveDatFileBro(localstorage) {
  localstorage.root.getFile("info.txt", {}, function(DatFile) {
    DatFile.moveTo(localstorage.root, "new.txt");
  });
}

从浏览器访问文件

由于文件存储在浏览器控制的保护区域中，无法通过直接输入文件名访问它们。相反，可以使用特定的 URL 协议访问这些文件：

filesystem:http://www.example.com/persistent/info.txt
filesystem:http://www.example.com/temporary/info.txt

URL 以 filesystem: 开头，后跟域名和存储类型（persistent 或 temporary）。

在 Chrome DevTools 中查看文件系统

Chrome 的 DevTools 提供了检查文件系统的功能。要启用此功能，请执行以下步骤：

1. 访问 chrome://flags/，启用“开发者工具实验”并重启浏览器。
2. 打开 DevTools，进入“实验”部分，启用“文件系统检查”。
3. 在“资源”选项卡中，找到“文件系统”部分，即可查看使用 FileSystem API 创建的文件和文件夹。

请注意，DevTools 仅支持查看文件和文件夹，无法直接编辑它们。

用例

FileSystem API 的应用场景非常广泛，适用于需要存储或缓存文件的 Web 应用程序。例如：

• 基于云的文字处理器
• 在线电子邮件客户端
• 其他需要本地存储支持的 Web 应用

通过 FileSystem API，Web 应用程序可以提供接近本地应用的用户体验。

原文链接: https://www.jotform.com/blog/html5-filesystem-api-create-files-store-locally-using-javascript-webkit/