OPFS 吃儲存配額,清網站資料就一起消失

OPFS 看起來像「網頁自己的硬碟」,但它和 localStorage、IndexedDB 一樣是以 origin 分割的儲存機制,共用同一套配額與清除規則。

兩條後果(MDN):

  • 受瀏覽器儲存空間配額限制,就像任何其他以 origin 分割的儲存機制。
  • 清除網站的儲存資料會刪除 OPFS。

查用量:

const e = await navigator.storage.estimate();
console.log(e.usageDetails?.fileSystem, '/ 配額', e.quota);

usageDetails 會按儲存機制細分,OPFS 看 fileSystem 那一項。

所以它不是「使用者的檔案」的替代品

比較的對象如果是「叫使用者下載成檔案、下次再上傳回來」:

下載成檔案OPFS
誰控制它的存亡使用者(他自己刪才會不見)使用者清網站資料就沒了
要不要使用者操作每次都要下載/上傳完全不用
能不能給別的 app 用✅❌

甜蜜點是「草稿區」:讓使用者在瀏覽器裡改到定稿、才下載成真正的檔案;下次要繼續改,直接基於 OPFS 裡那份接著做,不用重新上傳。

要長期保存、或要交給別的程式用的東西,終點還是得落到使用者的檔案系統。 OPFS 負責的是中間那段。

它為什麼值得用(快在哪)見 OPFS 不在使用者的檔案系統裡,所以快,也所以找不到。