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

Thomas Steiner
Thomas Steiner

Storage Standard 定義了永久儲存空間和配額預估的 API,以及平台儲存空間架構。我們推出了 API,讓您在記憶體壓力下,更能預測持續性儲存空間淘汰情形。可自 Chromium 122 起使用。

儲存空間標準可以解決什麼問題?

傳統上,當使用者用完裝置儲存空間時,透過 IndexedDB 或 localStorage 等 API 儲存的資料會遺失,使用者無法介入。如要讓儲存空間保持不變,您可以叫用 StorageManager 介面的 persist() 方法。同時向使用者要求權限,並在授予權限後變更儲存空間,使其永久有效:

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

要求保留儲存空間的方法之一,就是完全或沒有任何。您無法表示更精細的持續性需求。都是同一個儲存空間值區。

Storage Buckets API

Storage Buckets API 的核心概念是讓網站能夠建立多個儲存空間值區,瀏覽器可以選擇獨立刪除各個值區。這可讓開發人員指定淘汰優先順序,確保最有價值的資料不會遭到刪除。

用途範例

舉例來說,電子郵件應用程式就是一個儲存值區的實用範例。如果應用程式遺失使用者在用戶端上未傳送的草稿,那就會造成無法挽回的損失。相反地,如果這些信箱儲存在伺服器上,如果使用者的瀏覽器儲存空間較重,使用者可能不願意將某些最舊的收件匣電子郵件從用戶端移除。

電子郵件應用程式介面
以不同儲存空間值區存放收件匣和草稿的電子郵件應用程式,(僅供參考,這不一定反映 Gmail 的運作方式)。

使用 Storage Buckets API

建立新的儲存空間值區

您可以在 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 值區存取 Storage API

每個儲存空間 bucket 都會與儲存空間 API 相關聯,例如 IndexedDBCache 介面或 File 介面。這些儲存空間 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);
});

在開發人員工具中偵錯儲存空間值區

在「應用程式」>「儲存空間」專用樹狀結構中檢查儲存空間桶。

在「儲存空間」專區中啟用儲存空間值區樹狀結構前後的畫面。

實用資源