IndexedDB データの表示と変更

Kayce Basques
Kayce Basques
X GitHub

このガイドでは、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. データベースをクリックすると、その提供元とバージョン番号が表示されます。

    「notes」データベース

    図 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 のキーと値は、[Application] パネルから編集できません。ただし、DevTools はページ コンテキストにアクセスできるため、DevTools 内で JavaScript コードを実行して IndexedDB データを編集できます。

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

スニペットは、DevTools 内で JavaScript コードのブロックを保存して実行する方法です。スニペットを実行すると、結果が [Console] に記録されます。スニペットを使用すると、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. [空き容量を増やす] ペイン