查看及變更 IndexedDB 資料

Kayce Basques

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

查看 IndexedDB 的資料

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

    IndexedDB 選單

    圖 1：「IndexedDB」IndexedDB選單

    • 資料庫圖示 注意事項 - https://mdn.github.io 代表資料庫，其中「notes」是資料庫的名稱，而 https://mdn.github.io 則是可存取資料庫的來源。
    • 「物件存放區」圖示 附註是物件存放區。
    • title 和 body 是「索引」。

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

    「notes」資料庫

    圖 2：notes 資料庫

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

    「notes」物件儲存庫

    圖 3：notes 物件儲存庫

    • 項目總數是物件儲存庫中鍵/值組合的總數。
    • 金鑰產生器值是下一個可用的金鑰。只有在使用金鑰產生器時，系統才會顯示這個欄位。

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

    查看 IndexedDB 的值

    圖 4 查看 IndexedDB 的值

  4. 按一下索引 (例如下方圖 6 中的「標題」或「主體」)，根據該索引的值排序物件存放區。

    依索引排序物件儲存庫

    圖 5：根據 title 鍵按字母順序排序的物件儲存庫

重新整理 IndexedDB 資料

「Application」面板中的已建立索引資料庫值不會即時更新。查看物件儲存庫時，請按一下「Refresh」圖示 重新整理 以重新整理資料，或者，按一下「Refresh database」(重新整理資料庫) 來重新整理所有資料。

查看資料庫

圖 6：查看資料庫

編輯索引資料庫資料

您無法透過「Application」面板編輯索引資料庫鍵和值，由於開發人員工具可以存取頁面結構定義，因此您可以在開發人員工具中執行 JavaScript 程式碼，編輯索引資料庫的資料。

使用程式碼片段編輯已建立索引的資料庫資料

程式碼片段可用來在開發人員工具中儲存及執行 JavaScript 程式碼區塊。執行程式碼片段時，系統會將結果記錄在主控台。您可以使用程式碼片段執行 JavaScript 程式碼，以編輯索引資料庫資料庫。

使用程式碼片段與 IndexedDB 互動

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

刪除 IndexedDB 的資料

刪除 IndexedDB 鍵/值組合

  1. 查看 IndexedDB 物件儲存庫。

  2. 按一下要刪除的鍵/值組合。開發人員工具會醒目顯示其藍色，表示已選取。

    必須先選取鍵/值組合，才能將其刪除

    圖 8. 必須先選取鍵/值組合，才能將其刪除

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

    鍵/值組合刪除後，物件儲存庫會如何呈現

    圖 9. 鍵/值組合刪除後，物件儲存庫會如何呈現

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

  1. 查看 IndexedDB 物件儲存庫。

    查看物件儲存庫

    圖 10. 查看物件儲存庫

  2. 按一下「Clear object store」清除物件存放區。

刪除 IndexedDB 資料庫

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

  2. 按一下「刪除資料庫」。

    「刪除資料庫」按鈕

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

刪除所有 IndexedDB 儲存空間

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

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

    「清除儲存空間」窗格

    圖 12. 「Clear Storage」(清除儲存空間) 窗格