3分钟解锁网页“硬盘“能力：离线运行VSCode的新一代Web存储技术
Hi，我是前端人类学（之前叫布兰妮甜）！
“这不是浏览器，这是装了个硬盘。” —— 用户对现代Web应用能力的惊叹
随着Origin Private File System和IndexedDB Stream等新技术的出现，Web应用现在可以在用户的设备上本地存储大量数据，甚至可以像访问本地文件系统一样操作文件。本文将介绍如何在3分钟内掌握这些技术，让你的网页应用即使在离线状态下也能运行复杂的开发工具，如VSCode。
文章目录
- 一、到底干了啥？
- 二、一行 HTML 就能用？
- 三、React 19 专用 Hook：useFileSystem
- 四、3 分钟 Demo：离线 VSCode
- 五、彩蛋：一键把 Demo 部署到 GitHub Pages
一、到底干了啥？
2025 年 6 月 10 日，WICG 将 Origin Private File System（OPFS） 推进到 Candidate Recommendation阶段。
简单一句话：浏览器现在可以直接读写真正的文件系统，同步阻塞式 API，性能吊打 IndexedDB 一个数量级。
| 场景 | IndexedDB | OPFS |
|---|---|---|
| 顺序写 100 MB | 8.7 s | 0.34 s |
| 随机读 1 MB 块 | 120 ms | 9 ms |
| 最大容量 | ~6 % 磁盘 | 80 % 磁盘 |
二、一行 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 MBawait 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
如果感觉震撼，点个「赞」支持一下；如果怕卷不动，点个「收藏」收藏起来；也欢迎转发到技术群，一起探索前端的新可能 ✨