IndexedDB データの表示と変更

IndexedDB データを表示および変更するには、アプリケーション ツールを使用します。

IndexedDB データを表示する

新しいウィンドウまたはタブで IndexedDB を使用する Web ページを開きます。 PWAmp デモアプリケーションを使用できます。
DevTools を開くには、Web ページを右クリックし、[ 検査] を選択します。または、 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);
  }
}

スニペットを使用して IndexedDB データを編集する

スニペットは、DevTools 内で JavaScript コードを繰り返し格納して実行する方法です。 IndexedDB データを頻繁に編集する必要がある場合は、新しいスニペットに格納し、スニペットを実行します。詳細については、「任意の Web ページで JavaScript のスニペットを実行する」を参照してください。

スニペットを使用した IndexedDB の操作

IndexedDB データを削除する

次のいずれかを削除できます。

IndexedDB キーと値のペア。
オブジェクトストア内のすべてのキーと値のペア。
IndexedDB データベース。
すべての IndexedDB ストレージ。

これらのオプションについては、以下で説明します。

IndexedDB キーと値のペアを削除する

IndexedDB オブジェクトストアを表示します。
削除するキーと値のペアをクリックします。 DevTools では、キーと値のペアが強調表示され、選択されていることを示します。
Deleteキーを押すか、選択した削除 () ボタンをクリックします。

オブジェクトストア内のすべてのキーと値のペアを削除する

IndexedDB オブジェクトストアを表示します。
[ Clear object store (Clear object store )] $$オブジェクト$ ストアのクリア$ ボタンをクリックします。

IndexedDB データベースを削除する

削除する IndexedDB データベースを表示します。
[ データベースの削除] をクリックします。

すべての IndexedDB ストレージを削除する

アプリケーション ツールのサイドバーで、[ストレージ] をクリックします。
[ ストレージ ] チェックボックスまで下にスクロールし、[ IndexedDB ] チェックボックスがオンになっていることを確認します。
[ サイトデータのクリア ] ボタンをクリックします。

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-07-01