IndexedDB データの表示と変更

Kayce Basques 氏
Kayce Basques
Twitter GitHub Glitch

このガイドでは、Chrome DevTools を使用して IndexedDB のデータを表示、変更する方法について説明します。このドキュメントは、DevTools に精通していることを前提としています。まだ設定されていない場合は、スタートガイドをご覧ください。また IndexedDB の 知識があることも前提となりますそうでない場合は、IndexedDB の使用をご覧ください。

IndexedDB データを表示する

  1. [Application] タブをクリックして、[Application] パネルを開きます。 [IndexedDB] メニューを開いて、使用可能なデータベースを確認します。

    IndexedDB メニュー

    図 1. [IndexedDB] メニュー

    • データベース アイコン notes - https://mdn.github.io はデータベースを表します。ここで、notes はデータベースの名前、https://mdn.github.io はデータベースにアクセスできるオリジンです。
    • オブジェクト ストア アイコン notesは、オブジェクト ストアです。
    • title と body はインデックスです。

  1. データベースをクリックすると、そのデータベースのオリジンとバージョン番号が表示されます。

    「メモ」データベース

    図 2. notes データベース

  2. オブジェクト ストアをクリックすると、その Key-Value ペアが表示されます。

    「notes」オブジェクト ストア

    図 3. notes オブジェクト ストア

    • 合計エントリは、オブジェクト ストア内の Key-Value ペアの合計数です。
    • キー ジェネレータの値は、次に使用できるキーです。このフィールドは、キー生成ツールを使用している場合にのみ表示されます。

  3. [値] 列のセルをクリックして、その値を展開します。

    IndexedDB 値の表示

    図 4. IndexedDB 値の表示

  4. 以下の図 6 の [title] や [body] などのインデックスをクリックすると、そのインデックスの値に応じてオブジェクト ストアが並べ替えられます。

    インデックスによるオブジェクト ストアの並べ替え

    図 5. title キーに従ってアルファベット順に並べ替えられたオブジェクト ストア

IndexedDB データを更新する

[Application] パネルの IndexedDB 値はリアルタイムで更新されません。オブジェクト ストアの表示中に [更新] 更新 をクリックしてデータを更新するか、データベースを表示して [データベースを更新] をクリックしてすべてのデータを更新します。

データベースの表示

図 6. データベースの表示

IndexedDB データの編集

IndexedDB のキーと値は、[アプリケーション] パネルから編集することはできません。ただし、DevTools はページ コンテキストにアクセスできるため、IndexedDB データを編集する JavaScript コードを DevTools 内で実行できます。

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

スニペットを使用すると、JavaScript コードのブロックを DevTools 内に保存して実行できます。スニペットを実行すると、結果がコンソールに記録されます。スニペットを使用して、IndexedDB データベースを編集する JavaScript コードを実行できます。

スニペットを使用して IndexedDB を操作する

図 7. スニペットを使用して IndexedDB を操作する

IndexedDB データの削除

IndexedDB Key-Value ペアを削除する

  1. IndexedDB オブジェクト ストアを表示する。

  2. 削除する Key-Value ペアをクリックします。選択されると、DevTools ではこのアイコンが青色でハイライト表示されます。

    削除するための Key-Value ペアを選択する

    図 8. 削除するための Key-Value ペアを選択する

  3. Delete キーを押すか、[選択項目を削除] 選択したものを削除 をクリックします。

    Key-Value ペアが削除された後のオブジェクト ストアの外観

    図 9. Key-Value ペアが削除された後のオブジェクト ストアの外観

オブジェクト ストア内のすべての Key-Value ペアを削除する

  1. IndexedDB オブジェクト ストアを表示する。

    オブジェクト ストアの表示

    図 10. オブジェクト ストアの表示

  2. [オブジェクト ストアを消去] オブジェクト ストアを消去 をクリックします。

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

  1. 削除する IndexedDB データベースを表示します。

  2. [データベースを削除] をクリックします。

    [データベースを削除] ボタン

    図 11. [データベースを削除] ボタン

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

  1. [ストレージを消去] ペインを開きます。
  2. [IndexedDB] チェックボックスがオンになっていることを確認します。

  3. [サイトデータを消去] をクリックします。

    [ストレージを消去] ペイン

    図 12. [ストレージを消去] ペイン