Hi，我是前端人類學（之前叫布蘭妮甜）！
“這不是瀏覽器，這是裝了個硬盤。” —— 用戶對現代Web應用能力的驚嘆
隨著Origin Private File System和IndexedDB Stream等新技術的出現，Web應用現在可以在用戶的設備上本地存儲大量數據，甚至可以像訪問本地文件系統一樣操作文件。本文將介紹如何在3分鐘內掌握這些技術，讓你的網頁應用即使在離線狀態下也能運行復雜的開發工具，如VSCode。

---

---

一、到底干了啥？

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

---

如果感覺震撼，點個「贊」支持一下；如果怕卷不動，點個「收藏」收藏起來；也歡迎轉發到技術群，一起探索前端的新可能 ?