本指南將說明如何使用 Chrome 開發人員工具查看及變更 IndexedDB 資料。假設您已熟悉開發人員工具,如果您尚未安裝,請參閱「開始使用」一文。也假設您已熟悉 IndexedDB如果沒有,請參閱「使用 IndexedDB」。
查看 IndexedDB 資料
按一下「Application」分頁標籤,開啟「Application」面板。展開「IndexedDB」IndexedDB選單即可查看可用的資料庫。
圖 1. IndexedDB 選單
- notes - https://mdn.github.io 代表資料庫,其中 notes 是資料庫的名稱,而 https://mdn.github.io 是可存取資料庫的來源。
- 附註是物件存放區。
- title 和 body 是索引。
按一下資料庫即可查看來源和版本號碼。
圖 2:notes 資料庫
按一下物件存放區即可查看其鍵/值組合。
圖 3 notes 物件存放區
- 項目總數是指物件儲存庫中的鍵/值組合總數。
- 金鑰產生器值是下一個可用的鍵。只有在使用金鑰產生器時,才會顯示這個欄位。
按一下「值」欄中的儲存格,展開該值。
圖 4 查看 IndexedDB 值
按一下索引 (例如下方圖 6 中的 title 或 body),即可根據該索引的值排序物件儲存庫。
圖 5:物件儲存庫,依 title 鍵按照字母順序排序
重新整理 IndexedDB 資料
「Application」面板中的已建立索引資料庫值不會即時更新。在查看物件存放區時,按一下「Refresh」圖示 來重新整理資料,或者查看資料庫,然後按一下「RefreshDatabase」重新整理所有資料。
圖 6:查看資料庫
編輯 IndexedDB 資料
你無法透過「應用程式」面板編輯已建立索引資料庫的鍵與值。由於開發人員工具可存取頁面內容,因此您可以在 DevTools 中執行會編輯 IndexedDB 資料的 JavaScript 程式碼。
利用程式碼片段編輯已建立索引的資料庫資料
程式碼片段是在開發人員工具中儲存及執行 JavaScript 程式碼區塊的方式。執行程式碼片段時,系統會將結果記錄至主控台。您可以使用程式碼片段執行 JavaScript 程式碼,以編輯 IndexedDB 資料庫。
圖 7. 使用程式碼片段與已建立索引的資料庫互動
刪除 IndexedDB 資料
刪除 IndexedDB 鍵/值組合
- 查看 IndexedDB 物件儲存庫。
按一下要刪除的鍵/值組合。開發人員工具會醒目顯示藍色,表示已選取。
圖 8. 選取鍵/值組合即可將其刪除
按下「Delete」鍵或點選「Delete Selected」圖示 。
圖 9. 刪除鍵/值組合後的物件存放區
刪除物件儲存庫中的所有鍵/值組合
-
圖 10. 查看物件存放區
按一下「Clear object store」。
刪除 IndexedDB 資料庫
- 查看要刪除的 IndexedDB 資料庫。
按一下「刪除資料庫」。
圖 11. 「刪除資料庫」按鈕
刪除所有 IndexedDB 儲存空間
- 開啟「清除儲存空間」窗格。
- 確認已勾選「IndexedDB」IndexedDB核取方塊。
按一下「清除網站資料」。
圖 12. 「Clear storage」(清除儲存空間) 窗格