Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.cdn.mozilla.net/zh-CN/docs/Web/API/FileSystemFileHandle/createSyncAccessHandle below:

FileSystemFileHandle：createSyncAccessHandle() 方法 - Web API

我们的 createSyncAccessHandle() 模式测试示例提供了一个 <input> 字段来输入文本，以及两个按钮——一个用于将输入的文本写入原始私有文件系统中的文件末尾，另一个用于在文件太满时清空文件。

尝试探索上面的演示，打开浏览器开发者控制台，以便你可以看到正在发生的事情。如果你尝试在多个浏览器标签页中打开演示，你会发现可以同时打开多个句柄以同时写入文件。这是因为在 createSyncAccessHandle() 调用上设置了 mode: "readwrite-unsafe"。

下面我们将探索代码。

两个 <button> 元素和文本 <input> 字段如下所示：

<ol>
  <li>
    <label for="file-text">输入要写入文件的文本：</label>
    <input type="text" id="file-text" name="file-text" />
  </li>
  <li>将你的文本写入文件：<button class="write">写入文本</button></li>
  <li>如果文件太满，则清空该文件：<button class="empty">清空文件</button></li>
</ol>

HTML 文件中的主线程 JavaScript 如下所示。我们获取对写入文本按钮、清空文件按钮和文本输入字段的引用，然后使用 Worker() 构造函数创建一个新的 Web Worker。然后我们定义两个函数并将它们设置为按钮上的事件处理器：

• 单击写入文本按钮时运行 writeToOPFS()。此函数使用 Worker.postMessage() 方法将文本字段的输入值发布到对象内的 Worker，然后清空文本字段，为下一次添加做好准备。请注意传递的对象还包含 command: "write" 属性，以指定我们想要使用此消息触发写入操作。
• 单击清空文件按钮时运行 emptyOPFS()。这会将包含 command: "empty" 属性的对象发布到 Worker，指定要清空文件。

const writeBtn = document.querySelector(".write");
const emptyBtn = document.querySelector(".empty");
const fileText = document.querySelector("#file-text");

const opfsWorker = new Worker("worker.js");

function writeToOPFS() {
  opfsWorker.postMessage({
    command: "write",
    content: fileText.value,
  });
  console.log("主线程脚本：发送给 worker 的文本");
  fileText.value = "";
}

function emptyOPFS() {
  opfsWorker.postMessage({
    command: "empty",
  });
}

writeBtn.addEventListener("click", writeToOPFS);
emptyBtn.addEventListener("click", emptyOPFS);

worker JavaScript 如下所示。

首先，我们运行一个名为 initOPFS() 的函数，该函数使用 StorageManager.getDirectory() 获取对 OPFS 根目录的引用，使用 FileSystemDirectoryHandle.getFileHandle() 创建文件并返回其句柄，然后使用 createSyncAccessHandle() 返回 FileSystemSyncAccessHandle。此调用包括 mode: "readwrite-unsafe" 属性，允许多个句柄同时访问同一文件。

let accessHandle;

async function initOPFS() {
  const opfsRoot = await navigator.storage.getDirectory();
  const fileHandle = await opfsRoot.getFileHandle("file.txt", { create: true });
  accessHandle = await fileHandle.createSyncAccessHandle({
    mode: "readwrite-unsafe",
  });
}

initOPFS();

在 worker 的 message 事件处理器中，我们首先使用 getSize() 获取文件的大小。然后，我们检查消息中发送的数据是否包含 command 属性值 "empty"。如果是，我们使用 truncate() 清空文件，值为 0，并更新 size 变量中包含的文件大小。

如果消息数据是其他内容，我们：

• 创建新的 TextEncoder 和 TextDecoder 来处理稍后对文本内容的编码和解码。
• 使用 write() 对消息数据进行编码并将结果写入文件末尾，然后更新 size 变量中包含的文件大小。
• 创建一个 DataView 来包含文件内容，并使用 read() 将内容读入其中。
• 解码 DataView 内容并将其记录到控制台。

onmessage = function (e) {
  console.log("Worker：从主线程收到消息");

  // 获取文件当前大小
  let size = accessHandle.getSize();

  if (e.data.command === "empty") {
    // 将文件截断为 0 字节
    accessHandle.truncate(0);

    // 获取文件当前大小
    size = accessHandle.getSize();
  } else {
    const textEncoder = new TextEncoder();
    const textDecoder = new TextDecoder();

    // 对要写入文件的内容进行编码
    const content = textEncoder.encode(e.data.content);
    // 在文件末尾写入内容
    accessHandle.write(content, { at: size });

    // 获取文件当前大小
    size = accessHandle.getSize();

    // 准备文件长度的数据视图
    const dataView = new DataView(new ArrayBuffer(size));

    // 将整个文件读入数据视图
    accessHandle.read(dataView, { at: 0 });

    // 将当前文件内容记录到控制台
    console.log("文件内容：" + textDecoder.decode(dataView));

    // 刷新更改
    accessHandle.flush();
  }

  // 将文件的大小记录到控制台
  console.log("大小：" + size);
};

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4