查看及變更 IndexedDB 資料
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
本指南將說明如何使用 Chrome 開發人員工具查看及變更 IndexedDB 資料。假設您已熟悉開發人員工具。如果沒有,請參閱開始使用。本文也假設您熟悉 IndexedDB。如果沒有,請參閱使用 IndexedDB。
查看 IndexedDB 的資料
按一下「Application」分頁標籤,開啟「Application」面板。展開「IndexedDB」IndexedDB選單,查看可用的資料庫。
圖 1:「IndexedDB」IndexedDB選單
- 注意事項 - https://mdn.github.io 代表資料庫,其中「notes」是資料庫的名稱,而 https://mdn.github.io 則是可存取資料庫的來源。
- 附註是物件存放區。
- title 和 body 是「索引」。
按一下資料庫即可查看來源和版本號碼。
圖 2:notes 資料庫
按一下物件儲存庫即可查看鍵/值組合。
圖 3:notes 物件儲存庫
- 項目總數是物件儲存庫中鍵/值組合的總數。
- 金鑰產生器值是下一個可用的金鑰。只有在使用金鑰產生器時,系統才會顯示這個欄位。
按一下「值」欄中的儲存格,即可展開該值。
圖 4 查看 IndexedDB 的值
按一下索引 (例如下方圖 6 中的「標題」或「主體」),根據該索引的值排序物件存放區。
圖 5:根據 title 鍵按字母順序排序的物件儲存庫
重新整理 IndexedDB 資料
「Application」面板中的已建立索引資料庫值不會即時更新。查看物件儲存庫時,請按一下「Refresh」圖示 以重新整理資料,或者,按一下「Refresh database」(重新整理資料庫) 來重新整理所有資料。
圖 6:查看資料庫
編輯索引資料庫資料
您無法透過「Application」面板編輯索引資料庫鍵和值,由於開發人員工具可以存取頁面結構定義,因此您可以在開發人員工具中執行 JavaScript 程式碼,編輯索引資料庫的資料。
使用程式碼片段編輯已建立索引的資料庫資料
程式碼片段可用來在開發人員工具中儲存及執行 JavaScript 程式碼區塊。執行程式碼片段時,系統會將結果記錄在主控台。您可以使用程式碼片段執行 JavaScript 程式碼,以編輯索引資料庫資料庫。
圖 7. 使用程式碼片段與 IndexedDB 互動
刪除 IndexedDB 的資料
刪除 IndexedDB 鍵/值組合
- 查看 IndexedDB 物件儲存庫。
按一下要刪除的鍵/值組合。開發人員工具會醒目顯示其藍色,表示已選取。
圖 8. 必須先選取鍵/值組合,才能將其刪除
按下 Delete 鍵,或按一下「Delete Selected」(刪除所選項目) 。
圖 9. 鍵/值組合刪除後,物件儲存庫會如何呈現
刪除物件儲存庫中的所有鍵/值組合
查看 IndexedDB 物件儲存庫。
圖 10. 查看物件儲存庫
按一下「Clear object store」。
刪除 IndexedDB 資料庫
- 查看要刪除的 IndexedDB 資料庫。
按一下「刪除資料庫」。
圖 11. 「Delete database」(刪除資料庫) 按鈕
刪除所有 IndexedDB 儲存空間
- 開啟「清除儲存空間」窗格。
- 確認已啟用「IndexedDB」IndexedDB核取方塊。
按一下「清除網站資料」。
圖 12. 「Clear Storage」(清除儲存空間) 窗格
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2019-03-18 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2019-03-18 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2019-03-18 (世界標準時間)。"]]