查看和更改 IndexedDB 数据

创作时间:

作者:

@小白创作中心

查看和更改 IndexedDB 数据

引用

来源

https://learn.microsoft.com/zh-cn/microsoft-edge/devtools-guide-chromium/storage/indexeddb

IndexedDB是现代Web应用中常用的数据存储技术，特别是在需要离线存储和大量数据处理的场景中。本文将详细介绍如何使用Microsoft Edge的开发者工具查看和更改IndexedDB数据，包括查看、刷新、编辑和删除数据的具体步骤。

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

查看 IndexedDB 数据

在新窗口或选项卡中打开使用 IndexedDB 的网页。可以使用PWAmp 演示应用程序。
若要打开 DevTools，请右键单击网页，然后选择“检查”。或者，按Ctrl+Shift+I（Windows、Linux）或Command+Option+I(macOS)。 DevTools 随即打开。
在 DevTools 的“活动栏”上，选择“应用程序”选项卡。如果该选项卡不可见，请单击“更多工具”按钮。
默认情况下，通常会打开“清单”窗格：

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

keyval-store表示数据库。
keyval是数据库中的对象存储区。

选择数据库keyval-store，查看其源、版本号和有关数据库的其他信息：
keyval 单击对象存储，查看键值对：

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

单击“值”列中的单元格以展开该值：

刷新 IndexedDB 数据

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

若要刷新数据，请查看对象存储，然后单击“刷新”按钮。
若要刷新 IndexedDB 数据库中的所有数据，请查看数据库，然后单击“刷新数据库”。

编辑 IndexedDB 数据

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

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

在 DevTools 的“活动栏”上，选择“控制台”选项卡。
在控制台工具中，运行 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);
  }
}