管理 HTML5 離線儲存空間

HTML5 推出了許多儲存空間 API,可讓您將大量資料儲存在使用者的瀏覽器本機中。但根據預設,分配給各個應用程式的空間大小有限。Google Chrome 可讓您申請更多儲存空間,超過原本的 5 MB 容量上限。

本文件將介紹 Chrome 中儲存空間類型的基本概念,並說明可讓您管理儲存空間配額的實驗性 Quota Management API。本說明文件假設您已熟悉用戶端儲存空間的一般概念,也瞭解如何使用離線 API。

目錄

  1. 儲存空間類型
    1. 暫時
    2. 永久
    3. 無限制
    4. 比較儲存空間類型
  2. 管理配額
    1. 查詢儲存空間用量和可用性
    2. 要求取得更多儲存空間
    3. 重設測試配額
  3. API 參考資料
    1. 常數
    2. 方法總覽
    3. 方法
  4. 未來發展

儲存空間類型

在 Google Chrome 中,您可以要求提供三種儲存空間:

下列各節將詳細說明這些儲存類型,並在下方的表格中互相比較。

臨時儲存空間

臨時儲存空間是可供任何網頁應用程式使用的暫時性儲存空間。Chrome 會自動為應用程式提供臨時儲存空間,因此您不必要求分配。

共用集區

臨時儲存空間會由在瀏覽器中執行的所有網頁應用程式共用。共用集區最多可達 1/3 的可用磁碟空間。應用程式已使用的儲存空間會納入共用集區的儲存空間,也就是說,計算時是以 (available storage space + storage being used by apps) * .333 .

每個應用程式最多可擁有 20% 的共用集區。舉例來說,如果可用磁碟空間總容量為 60 GB,則共用集區為 20 GB,應用程式最多可以有 4 GB。計算方式為 1/3 的 1/3 (最多 20 GB) 可用磁碟空間 (60 GB) 的 20% (最多 4 GB)。

正在要求更多空間

雖然您可以查詢應用程式可用的儲存空間量,以及應用程式儲存的資料量,但無法要求取得更多暫存儲存空間。如果應用程式超出已分配的配額,系統就會擲回錯誤。

儲存空間已滿

一旦超過整個集區的儲存空間配額,系統就會刪除為最近使用次數最少的主機儲存的所有資料。但瀏覽器不會清除 LocalStorage 和 SessionStorage 中的資料。對於儲存在其他離線 API 中的資料,瀏覽器會刪除所有資料,而不是刪除部分資料,以免應用程式資料以非預期的方式損毀。

由於每個應用程式最多可使用 20% 的儲存空間集區,因此只有在使用者主動執行超過五個,且每個應用程式都在使用最大儲存空間時,系統才會刪除應用程式。

不過,當使用者在硬碟上新增更多檔案時,可用儲存空間會變少。當可用磁碟空間太緊時 (請記住,共用集區只佔「目前」可用磁碟空間的一半),瀏覽器會刪除為最近使用次數最少的主機儲存的所有資料。

永久儲存空間

永久儲存空間是在瀏覽器中保留的儲存空間,除非使用者清除。雖然這個 API 僅適用於使用 File System API 的應用程式,但最終仍可提供給其他離線 API,例如 IndexedDB 和應用程式快取。

應用程式可以擁有比臨時儲存空間更高的配額,但您必須使用 Quota Management API 要求儲存空間,且使用者必須授予您使用更多空間的權限。Chrome 會顯示資訊列,提示使用者授予應用程式更多本機儲存空間。

無限儲存空間

無限儲存空間與永久儲存空間類似,但僅適用於 Chrome 應用程式和擴充功能 (.crx 檔案)。無限儲存空間的大小受限於使用者硬碟中的可用空間。您可以在應用程式擴充功能的資訊清單檔案中要求 unlimitedStorage 權限。在安裝過程中,使用者會收到應用程式或擴充功能需要的權限。繼續進行安裝作業後,使用者會以隱含方式,針對在 manifest.json 檔案中列出的所有頁面授予權限。

詳情請參閱個別的應用程式擴充功能開發人員指南。

比較儲存類型

下表說明三種儲存空間之間的差異。

 臨時儲存空間永久儲存空間無限儲存空間
基本說明

任何網頁應用程式都提供的暫時性儲存空間。

此為自動化動作,不需要請求。

必須透過 Quota Management API 要求,並由使用者授予的永久儲存空間。

Chrome 擴充功能和應用程式的永久儲存空間。

這項資訊已在資訊清單檔案中設定,必須由使用者授予。

適用範圍

所有網頁應用程式。

所有網頁應用程式。僅限 Chrome 擴充功能,以及代管和安裝的網頁應用程式
權限無,且不必明確要求使用。

您必須使用 Quota Management API 要求更多儲存空間。

您可以在應用程式擴充功能的資訊清單檔案中要求 unlimitedStorage 權限。
首次使用時的使用者體驗不會向使用者顯示。應用程式順利執行。

Chrome 會顯示資訊列,提示使用者接受或拒絕儲存空間要求。

不過,如果您要求的配額數量實際低於應用程式目前的配置,則不會顯示提示。保留較大的配額。

在安裝過程中,使用者會收到應用程式或擴充功能要求的權限。繼續進行安裝作業後,使用者會以隱含方式,向應用程式擴充功能的 manifest.json 檔案列出網址的所有網頁授予權限。

後續要求增加儲存空間時的使用者體驗不適用。您無法申請更多臨時儲存空間。

Chrome 再次提示使用者。

 

無論應用程式或擴充功能要求增加配額,Chrome 都不會在安裝後提示使用者。
資料持續性

暫時性。瀏覽器則可刪除資料。

永久。除非使用者明確指示,否則瀏覽器不會刪除資料。後續存取資料會提供這些資料。

請勿假設資料是永久性的資料,因為使用者可予以刪除。

與永久儲存空間相同。

 

預設儲存空間

共用集區最多可達 20%。

0 MB。您必須明確要求取得特定儲存空間。

0 MB。您必須在資訊清單檔案中明確要求 unlimitedStorage

如果您未指定儲存空間需求,Chrome 會從臨時共用集區的共用集區中分配儲存空間給應用程式。

儲存空間上限共用集區最多可達 20%。硬碟上的可用空間最大。而且沒有固定的儲存空間集區。硬碟上的可用空間最大。
建議用途快取中。可離線使用或有大量資產的應用程式。設計為在 Google Chrome 中執行的應用程式。
可使用的 API

離線 API

  • 應用程式快取
  • 檔案系統
  • IndexedDB
  • WebSQL (自 2010 年 11 月 18 日起淘汰)

注意:LocalStorage 和 SessionStorage 等網路儲存空間 API 仍固定在 5 MB 中。

檔案系統 API

離線 API

  • 應用程式快取
  • 檔案系統
  • IndexedDB
  • WebSQL (已淘汰)

注意:LocalStorage 和 SessionStorage 等網路儲存空間 API 仍固定在 5 MB 中。

管理配額

透過 Chrome 13 推出的 Quota Management API,您可以執行以下動作:

API 是透過全域物件 window.webkitStorageInfo 實作。

如需參考說明文件,請參閱下一節

查詢儲存空間用量和可用性

如要查詢目前使用的儲存空間大小和主機剩餘的可用空間,請使用下列方式呼叫 queryUsageAndQuota()

  • 要查看的儲存空間類型
  • 成功回呼

API 回報的用量可能會與使用者資料的實際大小不相符,這是因為每個儲存空間都需要額外的位元組來儲存其中繼資料。此外,狀態更新可能會延遲,導致 API 無法反映最新的儲存空間狀態。

下列程式碼片段說明如何查詢儲存空間:

// Request storage usage and capacity left
// Choose either Temporary or Persistent
navigator.webkitTemporaryStorage.queryUsageAndQuota (
    function(usedBytes, grantedBytes) {
        console.log('we are using ', usedBytes, ' of ', grantedBytes, 'bytes');
    },
    function(e) { console.log('Error', e);  }
);

如要要求永久儲存空間的狀態,只要將 webkitStorageInfo.TEMPORARY 替換為 webkitStorageInfo.PERSISTENT 即可。列舉也位於 window 物件 (全域命名空間),因此您也可以使用 window.PERSISTENTwindow.TEMPORARY

要求取得更多儲存空間

由於分配會自動分配,您不必要求額外的臨時儲存空間,也無法超出上限 (如表格所述)。

如需 File System API 的永久儲存空間,預設配額為 0,因此您必須明確要求應用程式的儲存空間。使用以下項目呼叫 requestQuota()

  • 儲存空間類型
  • 大小
  • 成功回呼

視您要求的資訊而定,接下來會發生下列情況:

  • 如果您要求提高配額,瀏覽器會向使用者顯示資訊列,並提示他們授予或拒絕提高配額的權限。在某些情況下,系統可能會以無訊息的方式拒絕要求,然後傳回目前的配額或較低配額。
  • 如果您要求的配額數量低於應用程式目前的分配設定,則系統不會顯示提示。
  • 如果您要求的儲存空間超過許可上限,系統會顯示錯誤訊息 (QUOTA_EXCEEDED_ERR)。
  • 如果在使用者授予權限後再次呼叫 requestQuota(),則不會有任何反應。因此請勿再次呼叫該方法。

以下說明如何申請更多儲存空間:

// Request Quota (only for File System API)
var requestedBytes = 1024*1024*10; // 10MB

navigator.webkitPersistentStorage.requestQuota (
    requestedBytes, function(grantedBytes) {
        window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);

    }, function(e) { console.log('Error', e); }
);
});

重設測試配額

測試應用程式中的儲存空間時,建議您清除儲存的資料,以便在應用程式中測試配額管理。做法如下:

  1. 在網址列中輸入 chrome://settings/cookies
  2. 搜尋您的應用程式。
  3. 選取應用程式。
  4. 在醒目顯示的選取項目右側,按一下「X」X

API 參考資料

本節說明 Quota Management API 的方法。

常數

以下為 webkitStorageInfo 常數,表示儲存的類型。

常數說明
TEMPORARY0
PERSISTENT1永久儲存空間。

方法總覽

queryUsageAndQuota
requestQuota

方法

queryUsageAndQuota

檢查使用的儲存空間大小,以及主機剩餘的可用空間。

 // you could also use it from webkitPersistentStorage
navigator.webkitTemporaryStorage.queryUsageAndQuota(
      successCallback,
      errorCallback);
  • successCallback:具有兩個參數的選用回呼:

    • 應用程式目前的位元組數。
    • 配額剩餘的位元組數。
  • errorCallback:選用的錯誤回呼。

requestQuota

需要更多儲存空間。瀏覽器會顯示資訊列,提示使用者授予或拒絕應用程式擁有更多儲存空間的權限。

 // you could also use it from webkitTemporaryStorage
navigator.webkitPersistentStorage.requestQuota (
      newQuotaInBytes,
      quotaCallback,
      errorCallback);
參數
  • newQuotaInBytes:需要的儲存空間配額中的位元組數。
  • successCallback:可傳送所授予位元組數量的選用回呼。
  • errorCallback:選用的錯誤回呼。

未來發展

我們打算將所有 HTML5 離線儲存 API (包括 IndexedDB、應用程式快取、檔案系統和其他可能指定的 API) 放入 Quota Management API 底下。您將可管理所有的儲存空間分配。