Web端文件存储：IndexedDB与OPFS对比

const FILE_NAME_PREFIX = '__web-fs__';

// 使用的是OPFS API存取文件
const createContent = async ({ filename }: { filename: string }) => {
  const directoryHandle = await navigator.storage.getDirectory();
  const actualFilename = `${FILE_NAME_PREFIX}:${filename}`;

  const remove = async () => {
    try {
      await directoryHandle.removeEntry(actualFilename, {
        recursive: true,
      });
    } catch {}
  };

  await remove();

  const fileHandle = await directoryHandle.getFileHandle(actualFilename, {
    create: true,
  });
  const writable = await fileHandle.createWritable();

  let written = 0;

  let writPromise = Promise.resolve();

  const write = async (arr: Uint8Array) => {
    await writable.write(arr);
    written += arr.byteLength;
  };

  const updateDataAt = async (position: number, data: Uint8Array) => {
    await writable.seek(position);
    await writable.write(data);
    await writable.seek(written);
  };

  const writer = {
    write: (arr: Uint8Array) => {
      writPromise = writPromise.then(() => write(arr));
      return writPromise;
    },
    finish: async () => {
      await writPromise;

      try {
        await writable.close();
      } catch {
        // Ignore, could already be closed
      }
    },
    async getBlob() {
      // 等待所有挂起的写入操作完成
      await writPromise;

      const newHandle = await directoryHandle.getFileHandle(actualFilename, {
        create: true,
      });
      const newFile = await newHandle.getFile();
      return newFile;
    },
    getWrittenByteCount: () => written,
    updateDataAt: (position: number, data: Uint8Array) => {
      writPromise = writPromise.then(() => updateDataAt(position, data));
      return writPromise;
    },
    remove,
  };

  return writer;
};

const canUseWebFs = async () => {
  if (!('storage' in navigator)) {
    return false;
  }

  if (!('getDirectory' in navigator.storage)) {
    return false;
  }

  try {
    const directoryHandle = await navigator.storage.getDirectory();
    const fileHandle = await directoryHandle.getFileHandle('web-fs-support', {
      create: true,
    });

    const canUse = fileHandle.createWritable !== undefined;
    return canUse;
  } catch {
    return false;
  }
};

const save = async (filename: string, file: Blob): Promise<File> => {
  const root = await navigator.storage.getDirectory();
  const actualFilename = `${FILE_NAME_PREFIX}:${filename}`;

  try {
    // 尝试先删除，确保写入的是一个全新的文件
    // 这与 createContent 的行为保持一致
    await root.removeEntry(actualFilename, { recursive: true }).catch(() => {});

    // 获取文件句柄和可写流
    const fileHandle = await root.getFileHandle(actualFilename, {
      create: true,
    });
    const writable = await fileHandle.createWritable();

    // **核心步骤**: 使用 pipeTo 将文件流直接传输到可写流
    // 这是最高效的方式，由浏览器底层优化
    await file.stream().pipeTo(writable);

    // pipeTo 会在完成后自动关闭 writable 流
    // 现在，我们获取最终写入的文件并返回
    const finalFile = await fileHandle.getFile();
    return finalFile;
  } catch (error) {
    // 如果过程中发生任何错误，尝试清理创建了一半的文件
    await root.removeEntry(actualFilename, { recursive: true }).catch(() => {});
    // 将原始错误向上抛出，以便调用者能捕获到
    throw error;
  }
};

const read = async (filename: string): Promise<File | null> => {
  try {
    const root = await navigator.storage.getDirectory();
    const actualFilename = `${FILE_NAME_PREFIX}:${filename}`;

    // 获取文件句柄
    const fileHandle = await root.getFileHandle(actualFilename);

    // 从句柄获取文件对象并返回
    const file = await fileHandle.getFile();
    return file;
  } catch (error) {
    // 最常见的错误是文件未找到 (NotFoundError)
    // 在这种情况下，我们不应该抛出异常，而是返回 null，这更符合“查找”的语义
    if (error instanceof Error && error.name === 'NotFoundError') {
      return null;
    }
    // 如果是其他类型的错误（如权限问题），则应该向上抛出
    throw error;
  }
};

const remove = async (filename: string): Promise<boolean> => {
  try {
    const root = await navigator.storage.getDirectory();
    const actualFilename = `${FILE_NAME_PREFIX}:${filename}`;

    // 直接调用 removeEntry 删除文件
    await root.removeEntry(actualFilename);

    // 如果没有抛出错误，说明删除成功
    return true;
  } catch (error) {
    // 如果文件未找到，这不是一个程序错误，而是表示文件已经处于“被删除”的状态
    // 在这种情况下返回 false 是一个明确的信号
    if (error instanceof Error && error.name === 'NotFoundError') {
      return false;
    }
    // 其他错误（如权限问题）则应该被抛出
    console.error(`删除文件 "${filename}" 时发生错误:`, error);
    throw error;
  }
};

const clear = async (): Promise<void> => {
  try {
    const root = await navigator.storage.getDirectory();

    // root.values() 返回一个异步迭代器，包含所有文件和目录的句柄
    // 我们使用 for await...of 循环来遍历它们
    const promises: Promise<void>[] = [];
    for await (const handle of root.values()) {
      // 对每个条目调用 removeEntry 进行删除
      // { recursive: true } 对于删除非空目录至关重要
      promises.push(root.removeEntry(handle.name, { recursive: true }));
    }
    // 等待所有删除操作完成
    await Promise.all(promises);
  } catch (error) {
    console.error('清空 OPFS 时发生错误:', error);
    throw error;
  }
};

const webFs = {
  createContent,
  save,
  read,
  remove,
  clear,
  canUseWebFs,
};

export default webFs;