每個儲存空間的價值不盡相同:導入 Storage 值區

Storage Standard 定義了用來預估永久儲存空間和配額的 API,以及平台儲存空間架構。我們即將推出 API,讓您可以透過更容易預測的記憶體壓力造成永久儲存空間撤銷情形的 API。自 Chromium 122 起開放使用。

這個儲存體標準可以解決哪些問題?

一般來說,當使用者的裝置儲存空間不足時,使用索引資料庫或 localStorage 等 API 儲存的資料會遺失,使用者無法介入。如要永久儲存儲存空間,一種方法是叫用 StorageManager 介面的 persist() 方法。系統會同時要求使用者授予權限,並在授權後將儲存空間變更為永久儲存空間:

const persisted = await navigator.storage.persist();
if (persisted) {
  /* Storage will not be cleared except by explicit user action. */
}

您要求保留儲存空間的方法並非全部或一無。無法明確表達出更精細的持續性需求。一個儲存空間值區。

Storage 值區 API

Storage Buckets API 的核心概念可讓網站建立多個儲存空間值區,而瀏覽器可選擇將每個值區從其他值區單獨刪除。這可讓開發人員指定移除優先順序,確保最有價值的資料不會遭到刪除。

用途示例

請想像一個電子郵件應用程式,說明儲存空間值區可能派上用場的地方。如果應用程式遺失了只存在於用戶端中且未傳送的草稿,則應用程式不存在。相反地,如果這類電子郵件儲存在伺服器上,則使用者可能可以放心,如果瀏覽器面臨極大的儲存空間壓力,部分最舊收件匣的電子郵件可以從用戶端移除。

電子郵件應用程式介面
電子郵件應用程式,提供用於收件匣和草稿的個別儲存空間值區。(僅供參考,不一定代表 Gmail 的運作方式)。

使用 Storage Buckets API

建立新的 Storage 值區

您可以在 StorageBucketManager 介面上使用 open() 方法建立新的儲存空間值區。

// Create a storage bucket for emails that are synchronized with the
// server.
const inboxBucket = await navigator.storageBuckets.open('inbox');

建立永久性的新儲存空間值區

如要確保儲存空間值區維持不變,您可以將 durabilitypersisted 選項引數傳遞至 open() 方法:

  • persisted 會決定是否應保留儲存空間值區。允許的值為 false (預設) 或 true
  • durability 會提示瀏覽器,協助瀏覽器在停電時,降低寫入效能,並降低資料遺失的風險。允許的值為 'relaxed' (預設值) 或 'strict'

    • 'strict' 個值區會嘗試盡可能降低因停電而導致資料遺失的風險。這可能會使效能的成本降低。也就是說,寫入作業可能需要較長時間才能完成,可能影響整體系統效能、耗電量增加,以及消耗儲存裝置的速度更快。
    • 如果發生斷電情形,'relaxed' 值區可能會「忘記」在最後幾秒內完成的寫入作業。反之,將資料寫入這些值區可能會有更好的效能特性,並可能使電池充電時間變長,並導致儲存裝置生命週期較長。此外,電源故障不會導致資料損毀的速率高於 'strict' 值區。
// Create a storage bucket for email drafts that only exist on the client.
const draftsBucket = await navigator.storageBuckets.open('drafts', {
  durability: 'strict', // Or `'relaxed'`.
  persisted: true, // Or `false`.
});

從儲存空間值區存取 Storage API

每個儲存空間值區都與儲存空間 API 相關聯,例如 IndexedDBCache 介面或檔案介面。這些儲存空間 API 會照常運作,只是登錄點來自 StorageBucket 介面,例如 StorageBucket.indexedDB

const inboxDb = await new Promise(resolve => {
  const request = inboxBucket.indexedDB.open('messages');
  request.onupgradeneeded = () => { /* migration code */ };
  request.onsuccess = () => resolve(request.result);
  request.onerror = () => reject(request.error);
});

實用資源