查看和更改 IndexedDB 数据

凯切·巴斯克斯
Kayce Basques

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

查看 IndexedDB 数据

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

    IndexedDB 菜单

    图 1. IndexedDB 菜单

    • 数据库图标 notes - https://mdn.github.io 表示数据库,其中 notes 是数据库的名称,https://mdn.github.io 是可以访问该数据库的来源。
    • 对象存储图标 notes 是对象存储。
    • titlebody索引
  1. 点击一个数据库即可查看其来源和版本号。

    “备注”数据库

    图 2. Notes 数据库

  2. 点击某个对象存储以查看其键值对。

    “notes”对象存储

    图 3. notes 对象存储

    • 条目总数是指对象存储中的键值对总数。
    • 密钥生成器值是下一个可用的键。只有在使用密钥生成器时,此字段才会显示。
  3. 点击“值”列中的单元格以展开该值。

    查看 IndexedDB 值

    图 4. 查看 IndexedDB 值

  4. 点击某个索引(例如下面图 6 中的 titlebody),以便根据该索引的值对对象存储进行排序。

    按索引对对象存储进行排序

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

刷新 IndexedDB 数据

Application 面板中的 IndexedDB 值不会实时更新。在查看对象存储时,请点击 Refresh 刷新 以刷新其数据;或者,查看数据库,然后点击 Refresh database 以刷新所有数据。

查看数据库

图 6. 查看数据库

修改 IndexedDB 数据

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

使用代码段修改 IndexedDB 数据

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

使用代码段与 IndexedDB 交互

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

删除 IndexedDB 数据

删除 IndexedDB 键值对

  1. 查看 IndexedDB 对象存储
  2. 点击要删除的键值对。开发者工具会突出显示它,表示其已被选中。

    选择键值对以将其删除

    图 8. 选择键值对以将其删除

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

    删除键值对后对象存储的运作方式

    图 9. 删除键值对后对象存储的运作方式

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

  1. 查看 IndexedDB 对象存储

    查看对象存储

    图 10. 查看对象存储

  2. 点击 Clear Object Store 图标 清除对象存储

删除 IndexedDB 数据库

  1. 查看要删除的 IndexedDB 数据库
  2. 点击删除数据库

    “删除数据库”按钮

    图 11. 删除数据库按钮

删除所有 IndexedDB 存储空间

  1. 打开清理存储空间窗格。
  2. 确保已启用 IndexedDB 复选框。
  3. 点击清除网站数据

    “清除存储空间”窗格

    图 12. 清除存储空间窗格