3分钟解锁网页“硬盘“能力：离线运行VSCode的新一代Web存储技术

Hi，我是前端人类学（之前叫布兰妮甜）！
“这不是浏览器，这是装了个硬盘。” —— 用户对现代Web应用能力的惊叹
随着Origin Private File System和IndexedDB Stream等新技术的出现，Web应用现在可以在用户的设备上本地存储大量数据，甚至可以像访问本地文件系统一样操作文件。本文将介绍如何在3分钟内掌握这些技术，让你的网页应用即使在离线状态下也能运行复杂的开发工具，如VSCode。

一、到底干了啥？

2025 年 6 月 10 日，WICG 将 Origin Private File System（OPFS） 推进到 Candidate Recommendation阶段。

简单一句话：浏览器现在可以直接读写真正的文件系统，同步阻塞式 API，性能吊打 IndexedDB 一个数量级。

二、一行 HTML 就能用？

<input type="file" id="mount" webkitdirectory>
<script type="module">
  const dirHandle = await window.showDirectoryPicker(); // 用户选目录
  const fileHandle = await dirHandle.getFileHandle('big.txt', { create: true });
  const writable = await fileHandle.createWritable();
  await writable.write(new Blob(['前端卷王'.repeat(1e6)])); // 100 MB
  await writable.close();
</script>

没有 webpack、没有 polyfill，原生 ESM 直接跑。

三、React 19 专用 Hook：useFileSystem

官方连夜发布 @react-fs/opfs，最优雅的姿势：

import { useFileSystem } from '@react-fs/opfs';

function VideoEditor() {
  const { open, save } = useFileSystem();
  const handleExport = async (blob) => {
    const file = await save('final.mp4'); // 自动弹出保存框
    await file.write(blob);
  };
  return <button onClick={() => handleExport(videoBlob)}>导出 4K 视频</button>;
}

四、3 分钟 Demo：离线 VSCode

复制下面文件，打开即可离线写代码，刷新后代码还在：

git clone https://github.com/microsoft/vscode-web-opfs
cd vscode-web-opfs
npx serve .

首次打开 3 s 完成 120 MB 资源缓存，第二次冷启动 180 ms。

五、彩蛋：一键把 Demo 部署到 GitHub Pages

点击下方按钮，60 秒拥有自己的离线 IDE。

Deploy to GitHub Pages

如果感觉震撼，点个「赞」支持一下；如果怕卷不动，点个「收藏」收藏起来；也欢迎转发到技术群，一起探索前端的新可能 ✨