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

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');

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

為確保儲存空間值區能保留，您可以將 durability 和 persisted 選項引數傳遞至 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

每個儲存值區都與儲存空間 API 相關聯，例如 IndexedDB、Cache 介面或檔案介面。這些 Storage 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);
});

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

在「Application」 >「Storage」區段的專屬樹狀結構中檢查儲存空間值區。

「Storage」區段中啟用儲存空間值區樹狀結構的前後差異。

實用資源