網頁儲存空間

在瀏覽器中儲存資料的方式有很多種，哪一種方式最符合您的需求？

Pete LePage

網路連線可能非常枯燥無聊 離線支援和可靠的效能都是 漸進式網頁應用程式。即使在完美的無線環境中 巧妙運用快取和其他儲存技術 大幅改善使用者體驗。有幾種方式可以快取 靜態應用程式資源 (HTML、JavaScript、CSS、圖片等) 資料（使用者資料、新聞報導等）。不過，哪種解決方案最合適？做法 可以儲存多少商品？如何避免使用者遭到除名？

我該使用什麼？

以下為儲存資源的一般建議：

每個新式瀏覽器都支援 IndexedDB 和 Cache Storage API。 這些都是非同步作業，而且不會封鎖主執行緒。這些是 可從 window 物件、網路工作站和服務工作站進行存取，讓 讓你輕鬆在程式碼的任何位置使用

那其他儲存機制呢？

雖然瀏覽器上還有一些其他儲存機制， 使用受到限制，可能會導致重大效能問題。

「SessionStorage」SessionStorage是特定分頁，範圍限定為 都會產生作用適合儲存少量工作階段 特定資訊，例如索引資料庫鍵這應該和 因為這是同步的，所以會封鎖主執行緒。是 大小上限為 5 MB，且只能包含字串。因為這項工具僅適用於某個分頁 無法透過網路工作站或服務工作人員存取。

由於 LocalStorage 為同步性質，應避免使用 並封鎖主執行緒大小上限為 5 MB，且可包含 只有字串。無法透過網路工作站或服務存取 LocalStorage 工作站

Cookie 可運用，但不應用於儲存。 每個 HTTP 要求都會同時傳送 Cookie，因此如果儲存的資料超過 少量資料會大幅增加每個網路要求的規模。 這些資料為同步性質，而且無法透過網路工作人員存取。喜歡 LocalStorage 和 SessionStorage，Cookie 只能是字串。

File System API 和 FileWriter API 可以提供 讀取及寫入檔案至採用沙箱機制的檔案系統。雖然非同步的儲存作業 我們不建議這麼做 僅適用於以 Chromium 為基礎的瀏覽器。

File System Access API 的設計的目的在於 使用者可在本機檔案系統中輕鬆讀取及編輯檔案。該使用者 必須先授予權限，網頁才能讀取或寫入任何本機檔案；且 權限也不會保留到下一個工作階段。

不應使用 WebSQL，並將現有的使用方式遷移至 IndexedDB。從幾乎所有重大解決方案中都已移除支援功能 。W3C 在 2010 年停止維護 Web SQL 規格， 沒有計劃進一步的更新計畫

應用程式快取不應使用，且應現有使用 遷移至 Service Worker 和 Cache API這已經 已淘汰，並停止支援 未來的發展方向

我可以儲存多少金額？

簡單來說，至少會很多幾百 MB，甚至可能會 數百 GB 以上每種瀏覽器導入方式各有不同，但所需 通常享有儲存空間容量 裝置。

  • Chrome 最多允許瀏覽器使用 80% 的總磁碟空間。來源 最多會佔用 60% 的總磁碟空間您可以使用 StorageManager API 來判斷可用的配額上限。其他以 Chromium 為基礎的服務 則可能會有差異。
    • 在無痕模式中，Chrome 會減少來源可使用的儲存空間容量 約佔磁碟空間約 5%
    • 如果使用者啟用了「全部關閉後清除 Cookie 和網站資料」 窗戶」Chrome 的儲存空間配額已大幅降低為 大小上限為大約 300 MB
    • 請參閱 PR #3896： 進一步瞭解 Chrome 的實作方式
  • Internet Explorer 10 和更新版本的儲存大小上限為 250 MB，並且會觸發 使用的記憶體。
  • Firefox 允許瀏覽器使用最多 50% 的可用磁碟空間。一個 eTLD+1 群組 (例如example.com、www.example.com和foo.bar.example.com) 最多可使用 2 GB。您可以使用 StorageManager API：用來判斷剩餘空間 廣告。
  • Safari (電腦版和行動版) 似乎允許大約 1 GB。達到上限時 Safari 就會提示使用者，以 200 MB 為單位提高上限 遞增。我找不到任何相關的正式文件。
    • 如果將 PWA 新增到行動版 Safari 的主畫面， 建立新的儲存空間容器，而 PWA 之間不會共用任何資料 以及行動版 Safari。已安裝 PWA 的配額達到上限後 並沒有要求額外儲存空間。

過去，如果網站儲存的資料量超過特定門檻， 瀏覽器會提示使用者授予使用更多資料的權限。適用對象 舉例來說，如果來源使用的檔案大小超過 50 MB，瀏覽器就會提示使用者 最大可儲存 100 MB，之後以 50 MB 為單位再次提問即可。

目前，大多數新式瀏覽器都不會提示使用者，而是允許特定網站 達到配額上限。Safari 是例外狀況，表示 超過儲存空間配額時，系統會發送提示，要求提高配額 分配配額如果來源是 企圖使用超過其分配的配額，進一步嘗試寫入資料 失敗。

如何查看可用的儲存空間容量？

在多種瀏覽器中，您可以使用 StorageManager API 會決定儲存空間容量 以及應用程式所使用的儲存空間容量回報 IndexedDB 和 Cache API 都採用的位元組數 來計算剩餘的可用儲存空間。

if (navigator.storage && navigator.storage.estimate) {
  const quota = await navigator.storage.estimate();
  // quota.usage -> Number of bytes used.
  // quota.quota -> Maximum number of bytes available.
  const percentageUsed = (quota.usage / quota.quota) * 100;
  console.log(`You've used ${percentageUsed}% of the available storage.`);
  const remaining = quota.quota - quota.usage;
  console.log(`You can write up to ${remaining} more bytes.`);
}

StorageManager 尚未在所有瀏覽器中implemented，因此 必須先偵測出來，才能使用該功能即使在這些服務上線，您仍然必須 仍會找出超過配額錯誤 (請見下方說明)。在某些情況下 讓可用配額超過實際可用的儲存空間容量。

檢查

在開發期間，您可以使用瀏覽器的開發人員工具檢查 儲存資料，並可輕鬆清除所有已儲存的資料。

在 Chrome 第 88 版中加入了一項新功能，可用於覆寫網站的儲存空間 調整儲存空間窗格的配額這項功能可讓您模擬 測試您的應用程式在磁碟可用性低的情況下，運作情形 情境依序前往「Application」和「Storage」，然後啟用 在「模擬自訂儲存空間配額」核取方塊中，輸入要用於 模擬儲存空間配額

開發人員工具儲存空間窗格。

我在文中撰寫了一項簡單工具， 盡可能迅速用掉最多的儲存空間快捷簡便 嘗試不同的儲存機制，看看在 配額用盡

如何處理超過配額的問題？

超出配額時，應如何處理？最重要的是， 無論是 QuotaExceededError 還是 其他內容接著，根據應用程式設計決定處理方式。 例如，刪除長時間未存取的內容， 基礎架構大小，或讓使用者選擇想刪除的內容。

IndexedDB 和 Cache API 都會擲回名稱為 DOMError 如果超出可用配額，請QuotaExceededError。

IndexedDB

如果來源超過配額，嘗試寫入 IndexedDB 時， 失敗。系統會呼叫交易的 onabort() 處理常式，並傳遞事件。 該事件的錯誤屬性會包含 DOMException。正在檢查 錯誤 name 會傳回 QuotaExceededError。

const transaction = idb.transaction(['entries'], 'readwrite');
transaction.onabort = function(event) {
  const error = event.target.error; // DOMException
  if (error.name == 'QuotaExceededError') {
    // Fallback code goes here
  }
};

快取 API

如果來源已超過配額，系統會嘗試寫入 Cache API 將拒絕傳回 QuotaExceededError DOMException。

try {
  const cache = await caches.open('my-cache');
  await cache.add(new Request('/sample1.jpg'));
} catch (err) {
  if (error.name === 'QuotaExceededError') {
    // Fallback code goes here
  }
}

排除功能的運作原理為何？

網路儲存空間會分為兩類：「最佳成效」類別以及「永久性」 盡可能避免瀏覽器清除儲存空間， 會幹擾使用者，但較不適合長期或關鍵資料。 儲存空間不足時，系統不會自動清除永久儲存空間。該使用者 需要透過瀏覽器設定手動清除這個儲存空間。

根據預設，網站的資料 (包括 IndexedDB、Cache API 等) 屬於 因為除非網站 要求永久儲存空間時，瀏覽器可能會移除 網站資料，例如裝置儲存空間不足時。

盡可能排除政策為：

  • 瀏覽器一旦執行完畢，以 Chromium 為基礎的瀏覽器就會開始擷取資料 先從最不近期使用的來源清除所有網站資料 直到瀏覽器不再超出限制為止
  • Internet Explorer 10 以上版本不會清除資料，但會清除來源環境 您就不必再撰寫任何東西
  • Firefox 會在可用磁碟空間用盡時開始擷取資料。 先從最不近期使用的來源清除所有網站資料， ，直到瀏覽器不再超出限制為止。
  • Safari 之前沒有清除資料，但最近導入了新的 所有可寫入儲存空間為 7 天上限 (請見下方說明)。

從 iOS/iPadOS 13.4 和 macOS 上的 Safari 13.1 所有指令碼的可寫入儲存空間上限 (含 IndexedDB、service) 工作站註冊，以及 Cache API。這表示 Safari 會將所有內容 從 Safari 使用 7 天後才擷取到快取內容 會與網站進行互動這項移除政策不適用於已安裝的應用程式 已新增至主畫面的 PWA。詳情請見 前往 WebKit 上的完整第三方 Cookie 封鎖等功能 。

額外的好處：為 IndexedDB 使用包裝函式的好處

IndexedDB 是低階 API，必須先完成大量設定才能使用。 這對儲存簡單的資料來說特別痛苦與大多數現代不同 且以事件為基礎Promise 包裝函式，例如 索引資料庫的 idb 隱藏了部分強大的功能， 但務必隱藏複雜的機器，例如交易、結構定義版本管理 與 IndexedDB 程式庫搭配使用

結論

他們已無從限時儲存空間，提示使用者儲存更多資料， 更豐富的資料網站可以有效儲存所有的資源和資料 而不需要執行的版本使用 StorageManager API 可讓您 判斷可用容量和已使用量。並使用 永久儲存空間，除非使用者移除，否則您 才能防止遭到清除

其他資源

謝謝

在此特別感謝 Jarryd Goodman、Phil Walton、Eiji Kitamura、Daniel Murphy Darwin Huang、Josh Bell、Marijn Kruisselbrink 和 Victor Costan 正在審核 這篇文章。感謝 Eiji Kitamura、Addy Osmani 和 Marc Cohen 撰文者 閱讀論述自己的原始報導艾偉寫了一項實用工具 名為瀏覽器儲存空間濫用行為工具，可用於驗證 目前的行為它可以儲存最多資料，並 瀏覽器儲存空間上限感謝 Francois Beaufort 進行挖掘工作 算出它的儲存空間上限。

主頁橫幅由 Guillaume Bolduc 製作 Unsplash。