查看和更改 IndexedDB 数据

Kayce Basques

本指南介绍了如何使用 Chrome 开发者工具查看和更改 IndexedDB 数据。本文假定您熟悉开发者工具。如果没有，请参阅开始使用。此外，还假定您熟悉 IndexedDB。如果没有，请参阅使用 IndexedDB。

查看 IndexedDB 数据

1. 点击 Application 标签页以打开 Application 面板。 展开 IndexedDB 菜单，查看有哪些数据库可用。

   

   图 1. 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 对象存储区

   • 条目总数是对象存储区中的键值对总数。
   • 密钥生成器值是下一个可用密钥。仅在使用密钥生成器时，系统才会显示此字段。

3. 点击值列中的单元格可展开该值。

   

   图 4. 查看 IndexedDB 值

4. 点击某个索引（例如下文图 6 中的 title 或 body），即可根据该索引的值对对象存储区进行排序。

   

   图 5. 根据其 title 键按字母顺序排序的对象存储区

刷新 IndexedDB 数据

Application（应用）面板中的 IndexedDB 值不会实时更新。在查看对象存储区时，点击刷新 可刷新其数据；或者查看数据库并点击刷新数据库可刷新所有数据。

图 6. 查看数据库

修改 IndexedDB 数据

IndexedDB 键和值无法在应用面板中修改。不过，由于开发者工具可以访问页面上下文，因此您可以在开发者工具中运行 JavaScript 代码来修改 IndexedDB 数据。

使用代码段修改 IndexedDB 数据

代码段是一种在开发者工具中存储和运行 JavaScript 代码块的方式。运行代码段时，结果会记录到控制台。您可以使用代码段运行用于修改 IndexedDB 数据库的 JavaScript 代码。

图 7. 使用代码段与 IndexedDB 交互

删除 IndexedDB 数据

删除 IndexedDB 键值对

1. 查看 IndexedDB 对象存储区。

2. 点击要删除的键值对。开发者工具会以蓝色突出显示该元素，表示它已被选中。

   

   图 8. 选择要删除的键值对

3. 按 Delete 键或点击删除所选内容 。

   

   图 9. 删除键值对后的对象存储区

删除对象存储区中的所有键值对

1. 查看 IndexedDB 对象存储区。

   

   图 10. 查看对象存储区

2. 点击清除对象存储区 。

删除 IndexedDB 数据库

1. 查看要删除的 IndexedDB 数据库。

2. 点击删除数据库。

   

   图 11. 删除数据库按钮

删除所有 IndexedDB 存储空间

1. 打开清理存储空间窗格。
2. 确保已选中 IndexedDB 复选框。

3. 点击清除网站数据。

   

   图 12. 清理存储空间窗格