將資料儲存在裝置上

發行項
04/04/2023

漸進式Web Apps (PWA) 提供強大的選項，可在本機儲存資料，讓使用者即使在網路連線變得不穩定或離線時仍能繼續工作。

PWA 有數種方式可以在裝置上儲存資料，例如本機儲存體、快取 API 或 IndexedDB。

下表描述不同的選項，本文的其餘部分會針對每個選項深入瞭解詳細資料和使用案例。

儲存體選項	描述
Web 儲存體	Web 儲存體有兩種類型：會話和本機。 Web 儲存體很適合用來儲存來自您應用程式前端程式碼的少量資料。資料會結構化為索引鍵/值組，且僅適用于目前的應用程式來源。在會話儲存體的情況下，會在會話結束時清除資料，例如當應用程式關閉時，或當使用者流覽至相同視窗或索引標籤中的另一個來源時。本機儲存體會持續存在，直到應用程式移除資料為止。
IndexedDB	IndexedDB 是用來儲存大量結構化資料的 API。 API 是非同步，而且可以從應用程式的前端程式碼和服務背景工作程式碼使用。使用 IndexedDB API 在用戶端或二進位資料上儲存大量的結構化資料，例如加密的媒體物件或檔案。
快取	快取 API 可用來管理快取的資源。快取 API 是以承諾為基礎，可讓開發人員儲存和擷取許多 Web 資源，例如 HTML、CSS、JavaScript、影像、JSON 等等。快取 API 通常會在服務背景工作角色的內容中使用，但也適用于您應用程式的前端程式碼。
檔案系統存取	檔案系統存取 API 可讓您的 PWA 讀取使用者裝置上的檔案和資料夾，並將變更儲存回給它們。

注意：請勿使用 WebSQL 或應用程式快取。雖然這兩種是其他兩種瀏覽器儲存機制，但兩者都已被取代。請使用 IndexedDB，而不是 WebSQL。請使用快取 API，而不是應用程式快取。

Web 儲存體

Web 儲存體適用于將少量字串資料儲存在使用者的裝置上。 Web 儲存體的索引鍵/值組系統的簡單性可讓您輕鬆使用。

Web 儲存體只能在應用程式的主執行緒中同步運作。這表示 Web 儲存體無法在服務工作者內使用，而大量使用 Web 儲存體可能會對您的應用程式造成效能問題。

每種類型的 Web 儲存體、會話和本機都會維護為個別的資料存放區，與建立它的網域隔離。

sessionStorage 只會在會話期間保存，例如，當瀏覽器開啟時，包括重新整理頁面的時間。
localStorage 會保存到應用程式程式碼、使用者或瀏覽器移除資料為止。

下列程式碼示範如何使用 localStorage ，這類似于 sessionStorage 的使用方式：

const browserInformation = {
  name: 'Microsoft Edge',
  version: 108
};

localStorage.setItem('browser', JSON.stringify(browserInformation));

上述程式碼會使用 setItem() 方法將 JavaScript 物件儲存為中的 JSON 字串 localStorage ，並指派等於 browser 的索引鍵。您可以使用方法從 localStorage 中擷取資訊， getItem() 如下所示：

const value = localStorage.getItem('browser');

const browserInformation = JSON.parse(value);

若要深入瞭解，請參閱 MDN 上的 Web 儲存體 API 。

IndexedDB

IndexedDB 是一種非同步 API，可用來儲存結構化資料，可用於應用程式的前端程式碼或服務背景工作程式碼。使用 IndexedDB API 在用戶端或二進位資料上儲存大量的結構化資料，例如加密的媒體物件或檔案。

IndexedDB 是將資料儲存在 PWA 中的最佳選項，因為使用 API 並不會封鎖主執行緒來使應用程式變慢，而且可以從應用程式的前端程式碼和服務背景工作角色使用。

使用 IndexedDB 比使用 Web 儲存體更複雜，而且需要下列步驟來儲存資料：

使用 window.indexedDB.open() 函式開啟資料庫。
使用函式，在資料庫中建立 IDBDatabase.createObjectStore() 物件存放區。
使用 IDBDatabase.transaction() 函式啟動交易以儲存資料。
藉由接聽事件，等候作業完成。

若要深入瞭解並檢視程式碼範例，請參閱在 MDN 上使用 IndexedDB 。

快取

快取 API 是一種系統，可在應用程式的前端程式碼或服務背景工作角色中儲存和擷取網路要求和回應。它可用來將影像和檔案等資產儲存在使用者裝置的本機。這可讓您的應用程式即使在離線時也能運作，或藉由減少轉譯應用程式所需的網路要求數目來改善其效能。

下列程式碼片段示範如何在服務背景工作角色中接聽 fetch 事件，並使用快取 API 儲存來自伺服器的回應：

self.addEventListener("fetch", event => {
  async function cacheAndReturnRequest() {
    // Get the response from the server.
    const fetchResponse = await fetch(event.request.url);
    // Open the app's cache.
    const cache = await caches.open("cache-name");
    // Put the response in cache.
    cache.put(event.request.url, fetchResponse.clone());
    // And return the response.
    return fetchResponse.
  }

  event.respondWith(cacheAndReturnRequest());
});

若要探索其他有用的快取 API 案例，請參閱使用服務背景工作角色來管理網路要求。

檔案系統存取

檔案系統存取 API 可讓您的應用程式以類似原生應用程式的方式存取使用者裝置上的檔案。它可以用來建立可讀取和寫入檔案的應用程式，例如文字或影像編輯器。

若要從使用者的裝置開啟檔案，請使用函式 showOpenFilePicker() ：

openFileButton.addEventListener("click", async () => {
  const fileHandles = await window.showOpenFilePicker();
});

若要深入瞭解，請參閱 MDN 上的 Window.showOpenFilePicker () 。

檔案系統存取 API 也可以與 PWA 檔案處理功能結合，將您的應用程式註冊為特定檔案類型的處理常式，因而對使用者感覺更原生。若要深入瞭解，請參閱處理漸進式Web Apps中的檔案。

源私人檔案系統存取 API 是檔案系統存取 API 的變化，旨在為使用者提供更多隱私權。它也允許應用程式存取使用者裝置上的檔案，但只能在應用程式來源私人的特定目錄記憶體取檔案。此外，此 API 的目的並不是要讓使用者使用其檔案總管輕鬆存取私人目錄。

若要從原始私人檔案系統開啟檔案，請使用 navigator.storage 承諾型 API：

// Get the origin-private directory handle.
const root = await navigator.storage.getDirectory();
// Get the handle for a file in the directory.
const fileHandle = await root.getFileHandle("my-file.txt");

儲存配額

在 Microsoft Edge 中，本機和會話儲存體限制為每個儲存體約 5 MB。

其他類型的資料儲存體，例如 IndexedDB、快取 API 或原始私人檔案系統存取 API，最多可以使用裝置上總磁碟空間的 60%。例如，如果您的應用程式執行所在的裝置有 64 GB 的磁片，Microsoft Edge 可讓您的應用程式儲存最多 38 GB 的資料。

請注意，裝置上實際可用的可用空間可能小於 60% 的儲存配額。例如，如果您的應用程式執行所在的裝置有 64GB 的磁片，但作業系統和其他檔案已使用 50GB，即使儲存體配額仍為 38 GB，您的應用程式也只能儲存 14GB 的資料。

您可以使用 navigator.storage.estimate() 來詢問儲存體管理員 API 應用程式來源的儲存體配額為何，以及其已使用量。若要深入瞭解，請參閱 MDN 上的 StorageManager.estimate () 。

嘗試儲存超過可用或允許的資料，會導致 JavaScript 錯誤。您的程式碼應該使用語 try...catch 句來攔截此錯誤。下列程式碼片段示範如何在使用 Web 儲存體儲存資料時攔截超出的配額錯誤：

try {
  localStorage.setItem('foo', 'bar');
} catch (e) {
  // Code that handles the lack of storage space.
}

資料收回

當使用者的裝置在可用磁碟空間上開始不足，也稱為 儲存壓力時，Microsoft Edge 會開始收回非持續性資料。

這表示使用快取 API、IndexedDB、原始私人檔案系統存取 API 或 Web 儲存體儲存的應用程式資料可能會遭到收回。

根據預設，您的應用程式儲存的資料不會被視為持續性，而且可能會在儲存體壓力時遭到收回。如果您的應用程式儲存重要資料，請使用 navigator.storage.persist() 函式讓應用程式的儲存體永續性。永續性儲存體只能由使用者清除。若要深入瞭解，請參閱 MDN 上的 StorageManager.persist () 。