永久儲存空間

永久儲存空間可協助防止重要資料遭到清除,並降低資料遺失的可能性。

面臨磁碟空間不足等儲存空間壓力時,瀏覽器通常會從最近最少使用的來源清除資料,包括來自 Cache API 和 IndexedDB 的資料。如果應用程式未與伺服器同步資料,可能會導致資料遺失,並且移除應用程式運作所需的資源,藉此降低應用程式的穩定性,兩者都會對使用者體驗造成負面影響。

幸好,Chrome 團隊的研究顯示 Chrome 很少自動清除資料。使用者手動清除儲存空間是很常見的情況。因此,如果使用者會定期造訪您的網站,出現資料的頻率可能會很小。如要避免瀏覽器刪除您的資料,您可以要求將整個網站的儲存空間標示為永久儲存空間。

許多新式瀏覽器都支援永久儲存空間。

瀏覽器支援

  • 55
  • 79
  • 57
  • 15.2

資料來源

如要進一步瞭解移除程序、可儲存的數量,以及處理配額限制的方式,請參閱網頁版儲存空間

確認網站的儲存空間是否已標示為永久儲存空間

您可以使用 JavaScript 判斷網站的儲存空間是否已標示為永久儲存空間。呼叫 navigator.storage.persisted() 會傳回 Promise,這個 Promise 會以布林值解析,表示儲存空間是否已標示為保留。

// Check if site's storage has been marked as persistent
if (navigator.storage && navigator.storage.persist) {
  const isPersisted = await navigator.storage.persisted();
  console.log(`Persisted storage granted: ${isPersisted}`);
}

何時該要求使用永久儲存空間?

當您儲存重要使用者資料,且要求最好能納入使用者手勢中,是要求將儲存空間標示為永久儲存空間的最佳時機。不要在網頁載入時或其他 Bootstrap 程式碼中要求永久儲存空間,瀏覽器可能會提示使用者授予權限。如果使用者認為要儲存的內容並未執行,提示可能會令人困惑,甚至拒絕要求。此外,不要頻繁提示如果使用者決定不授予權限,下次儲存時,請勿立即顯示提示,

要求永久儲存空間

如要要求將網站資料的永久儲存空間,請呼叫 navigator.storage.persist()。系統會傳回 Promise,該 Promise 會以布林值解析,指出是否已授予永久儲存空間權限。

// Request persistent storage for site
if (navigator.storage && navigator.storage.persist) {
  const isPersisted = await navigator.storage.persist();
  console.log(`Persisted storage granted: ${isPersisted}`);
}

如何授予權限?

永久儲存空間會視為權限。瀏覽器會根據不同的因素,決定是否授予永久儲存空間權限。

Chrome 和其他以 Chromium 為基礎的瀏覽器

Chrome 和大多數其他以 Chromium 為基礎的瀏覽器都會自動處理權限要求,而且不會向使用者顯示任何提示。如果網站被視為重要,則會自動授予永久儲存空間權限,否則會在不發出通知的情況下拒絕。

判斷網站是否重要時,系統會運用以下經驗法則:

  • 網站參與度有多高?
  • 網站是否已安裝或加入書籤?
  • 網站是否已獲授權顯示通知?

如果要求遭拒,之後可以再次要求,並使用相同的經驗法則評估。

Firefox

Firefox 會將權限要求委派給使用者。當系統要求永久儲存空間時,使用者介面會顯示彈出式視窗,詢問使用者是否允許網站將資料儲存在永久儲存空間中。

網站要求永久儲存空間時,Firefox 會顯示彈出式視窗。
網站要求永久儲存空間時,Firefox 會顯示彈出式視窗。

什麼儲存空間會受到永久儲存空間保護?

如果授予永久儲存空間權限,瀏覽器將不會收回儲存在以下項目中的資料:

  • 快取 API
  • 餅乾
  • DOM 儲存空間 (本機儲存空間)
  • File System API (瀏覽器提供且採用沙箱機制的檔案系統)
  • IndexedDB
  • Service Worker
  • 應用程式快取 (已淘汰,不應使用)
  • WebSQL (已淘汰,請勿使用)

如何停用永久儲存空間

目前尚無法透過程式輔助方式告訴瀏覽器您不再需要永久儲存空間。

結語

Chrome 團隊的研究顯示,雖然可能,Chrome 很少會自動清除儲存的資料。如要保護可能未儲存在雲端或導致大量資料遺失的重要資料,永久儲存空間是實用的工具,可確保瀏覽器不會在本機裝置面臨儲存壓力時移除您的資料。別忘了,只在使用者最需要的時候要求永久儲存空間。

感謝

特別感謝 Victor Costan 和 Joe Medley 針對這篇文章的解說。 感謝 Chris Wilson 撰寫本文的原始版本,也就是首次出現在 WebFundamentals 上的版本。

由 Umberto 撰寫的 Unsplash 主頁橫幅