查看及變更 IndexedDB 資料

Kayce Basques

本指南說明如何使用 Chrome 開發人員工具查看及變更 IndexedDB 資料。並假設您熟悉開發人員工具。如果沒有，請參閱「開始使用」。並假設您熟悉 IndexedDB。如果沒有，請參閱「使用 IndexedDB」。

查看 IndexedDB 資料

1. 按一下「Application」分頁標籤，開啟「Application」面板。展開「IndexedDB」IndexedDB選單，查看可用的資料庫。

   

   圖 1. 「IndexedDB」IndexedDB選單

   • notes - https://mdn.github.io 代表資料庫，其中 notes 是資料庫名稱，https://mdn.github.io 是可存取資料庫的來源。
   • notes 是物件儲存庫。
   • title 和 body 是索引。

注意：已知限制：第三方資料庫不會顯示。舉例來說，如果您使用 <iframe> 在網頁中嵌入廣告，且廣告聯播網使用 IndexedDB，則廣告聯播網的 IndexedDB 資料將不會顯示。請參閱問題 #943770。

1. 按一下資料庫，即可查看來源和版本號碼。

   

   圖 2. notes 資料庫

2. 按一下物件儲存庫，即可查看其鍵/值組合。

   注意：IndexedDB 資料不會即時更新。請參閱「重新整理 IndexedDB 資料」。

   

   圖 3. notes 物件儲存庫

   • 「Total entries」是物件儲存庫中的鍵/值組合總數。
   • 「Key generator value」是下一個可用的鍵。只有在使用金鑰產生器時，才會顯示這個欄位。

3. 按一下「Value」欄中的儲存格，即可展開該值。

   

   圖 4. 查看 IndexedDB 值

4. 按一下索引 (例如下圖 6 中的 title 或 body)，即可根據該索引的值排序物件儲存庫。

   

   圖 5：物件儲存庫，依 title 鍵的字母順序排序

重新整理 IndexedDB 資料

「Application」面板中的 IndexedDB 值不會即時更新。查看物件儲存庫時，按一下「Refresh」(重新整理) 即可重新整理資料；查看資料庫時，按一下「Refresh database」(重新整理資料庫) 即可重新整理所有資料。

圖 6. 查看資料庫

編輯 IndexedDB 資料

您無法在「Application」面板中編輯 IndexedDB 鍵和值。不過，由於開發人員工具可以存取網頁內容，因此您可以在開發人員工具中執行 JavaScript 程式碼，編輯 IndexedDB 資料。

使用程式碼片段編輯 IndexedDB 資料

程式碼片段可用於在開發人員工具中儲存及執行 JavaScript 程式碼區塊。執行程式碼片段時，結果會記錄到「Console」。您可以使用程式碼片段執行 JavaScript 程式碼，編輯 IndexedDB 資料庫。

圖 7. 使用程式碼片段與 IndexedDB 互動

刪除 IndexedDB 資料

刪除 IndexedDB 鍵/值組合

1. 查看 IndexedDB 物件儲存庫。

2. 按一下要刪除的鍵/值組合。DevTools 會以藍色醒目顯示，表示已選取。

   

   圖 8. 選取要刪除的鍵/值組合

3. 按下 Delete 鍵，或按一下「Delete Selected」(刪除所選項目) 。

   

   圖 9. 刪除鍵/值組合後的物件儲存庫

刪除物件儲存庫中的所有鍵/值組合

1. 查看 IndexedDB 物件儲存庫。

   

   圖 10. 查看物件儲存庫

2. 按一下「清除物件儲存庫」。

刪除 IndexedDB 資料庫

1. 查看要刪除的 IndexedDB 資料庫。

2. 按一下「Delete database」(刪除資料庫)。

   

   圖 11. 「Delete database」(刪除資料庫) 按鈕

刪除所有 IndexedDB 儲存空間

1. 開啟「清除儲存空間」窗格。
2. 確認已勾選「IndexedDB」IndexedDB核取方塊。

3. 按一下「清除網站資料」。

   

   圖 12. 「清除儲存空間」窗格