使用英语阅读

通过


查看和更改 IndexedDB 数据

若要查看和更改 IndexedDB 数据,请使用 应用程序 工具。

查看 IndexedDB 数据

  1. 在新窗口或选项卡中打开使用 IndexedDB 的网页。可以使用 PWAmp 演示应用程序

  2. 若要打开 DevTools,请右键单击网页,然后选择“检查”。 或者,按 Ctrl+Shift+I(Windows、Linux)或 Command+Option+I (macOS)。 DevTools 随即打开。

  3. 在 DevTools 的 “活动栏”上,选择“ 应用程序 ”选项卡。如果该选项卡不可见,请单击“ 更多工具 (更多工具”图标) 按钮。

    默认情况下, 通常会打开“清单 ”窗格:

    应用程序工具的“清单”窗格

  4. 在边栏中的 “存储”下,展开 “IndexedDB ”菜单,查看哪些数据库可用:

    IndexedDB 菜单

    • (“数据库”图标) keyval-store 表示数据库。

    • (对象存储图标) keyval 是数据库中的对象存储区。

  5. 选择数据库 keyval-store ,查看其源、版本号和有关数据库的其他信息:

    应用程序工具中有关 keyval-store 数据库的信息

  6. keyval单击对象存储,查看键值对:

    Notes 对象存储

    注意: IndexedDB 数据不会实时更新。 如果对象存储中显示过时的数据,请刷新对象存储视图。 请参阅 刷新 IndexedDB 数据

  7. 单击“ ”列中的单元格以展开该值:

    查看 IndexedDB 值

刷新 IndexedDB 数据

应用程序工具中的 IndexedDB 值不会实时更新。

  • 若要刷新数据,请查看对象存储,然后单击“ 刷新 (刷新) 按钮。

  • 若要刷新 IndexedDB 数据库中的所有数据,请查看数据库,然后单击“ 刷新数据库”:

    带有“刷新”按钮的数据库视图

编辑 IndexedDB 数据

无法从 应用程序 工具编辑 IndexedDB 键和值。 但是,由于 DevTools 有权访问页面上下文,因此可以在 DevTools 中运行 JavaScript 代码来编辑存储在 IndexedDB 数据库中的数据。

使用控制台工具编辑 IndexedDB 数据

  1. 在 DevTools 的 “活动栏”上,选择“ 控制台 ”选项卡。

  2. 控制台工具中 ,运行 JavaScript 代码以编辑 IndexedDB 数据。 例如,若要向对象存储添加新值 keyval ,请运行以下代码:

    let connection = indexedDB.open("keyval-store", 1);
    
    connection.onsuccess = e => {
      const database = e.target.result;
      const transaction = database.transaction("keyval", "readwrite");
      const objectStore = transaction.objectStore("keyval");
      const request = objectStore.add({foo: "bar"}, "new-key");
      request.onsuccess = e => {
        console.log(e.target.result);
      }
    }
    

使用代码片段编辑 IndexedDB 数据

代码片段 是一种在 DevTools 中重复存储和运行 JavaScript 代码的方法。 如果需要经常编辑 IndexedDB 数据,请将其存储在新代码片段中,然后运行代码片段。 若要了解详细信息,请参阅 在任何网页上运行 JavaScript 的代码片段

使用代码片段与 IndexedDB 交互

删除 IndexedDB 数据

可以删除以下任一项:

  • IndexedDB 键值对。
  • 对象存储中的所有键值对。
  • IndexedDB 数据库。
  • 所有 IndexedDB 存储。

下面介绍了这些选项。

删除 IndexedDB 键值对

  1. 查看 IndexedDB 对象存储

  2. 单击要删除的键值对。 DevTools 突出显示键值对以指示已选中:

    在对象存储视图中选择了键值对项

  3. Delete,或单击“ 删除所选 (删除所选”图标) 按钮:

    对象存储视图工具栏中的“删除键值”按钮

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

  1. 查看 IndexedDB 对象存储

  2. 单击“ 清除对象存储 (清除对象存储) ”按钮。

    对象存储视图工具栏中的清除对象存储按钮

删除 IndexedDB 数据库

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

  2. 单击“ 删除数据库”。

    “删除数据库”按钮

删除所有 IndexedDB 存储

  1. “应用程序 ”工具的边栏中,单击“ 存储”。

  2. 向下滚动到 “存储 ”复选框,并确保选中“ IndexedDB ”复选框。

  3. 单击“ 清除站点数据 ”按钮。

    “存储”窗格,其中显示了各种存储复选框和“清除站点数据”按钮

备注

此页面的某些部分是根据 Google 创建和共享的作品所做的修改,并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面 在此处 找到,由凯斯·巴斯克创作。

Creative Commons 许可证 本作品根据 Creative Commons Attribution 4.0 International License 获得许可。