檢視與變更 IndexedDB 資料

要查看和更改 IndexedDB 資料，請使用 應用程式 工具。

查看 IndexedDB 資料

在新視窗或分頁中開啟使用 IndexedDB 的網頁。你可以使用 PWAmp 示範應用程式。
要開啟 DevTools，請右鍵點擊網頁，然後選擇檢查。或者，在 Windows、Linux) 按 Ctrl+Shift+I (macOS) 按 Command+Option+I (。 DevTools 開啟。
在 DevTools 的 活動欄中，選擇 應用程式 標籤。如果那個分頁看不到，請點擊 「更多工具 」 ) 按鈕。

清單面板通常預設會開啟：
在側邊欄的儲存區，展開 IndexedDB 選單，查看可用的資料庫：
- () keyval-store 代表資料庫。
- () keyval 是資料庫中的物件儲存。
選擇資料庫， keyval-store 以查看其來源、版本號及其他資料庫相關資訊：
點擊 keyval 物件儲存，可查看鍵值對：

便條： IndexedDB 的資料不會即時更新。如果你在物件儲存中看到過時的資料，請重新整理物件儲存檢視。請參見 Refresh IndexedDB 資料。
點擊 「價值 」欄中的儲存格以展開該值：

刷新 IndexedDB 資料

應用程式工具中的 IndexedDB 值不會即時更新。

要刷新資料，請先檢視物件儲存，然後點擊 「重新整理 」 () 」按鈕。
要刷新 IndexedDB 資料庫中的所有資料，請先檢視資料庫，然後點擊 「重新整理資料庫」：

編輯 IndexedDB 資料

IndexedDB 的鍵和值無法從 應用程式 工具中編輯。不過，由於 DevTools 能存取頁面上下文，你可以在 DevTools 內執行 JavaScript 程式碼，編輯 IndexedDB 資料庫中儲存的資料。

使用 Console 工具編輯 IndexedDB 資料

在 DevTools 的 活動欄中，選擇 控制台 標籤。

在 主控台 工具中，執行 JavaScript 程式碼來編輯 IndexedDB 資料。例如，要在物件儲存中新增一個值 keyval ，請執行以下程式碼：

let connection = indexedDB.open("keyval-store", 1);

connection.onsuccess = e => {
  const database = e.target.result;
  const transaction = database.transaction("keyval", "readwrite");
  const objectStore = transaction.objectStore("keyval");
  const request = objectStore.add({foo: "bar"}, "new-key");
  request.onsuccess = e => {
    console.log(e.target.result);
  }
}