IndexedDB データの表示と変更

Kayce Basques

このガイドでは、Chrome DevTools を使用して IndexedDB データを表示および変更する方法について説明します。また、DevTools に精通していることを前提としています。まだ表示されていない場合は、スタートガイドをご覧ください。また、IndexedDB に精通していることを前提としています。そうでない場合は、IndexedDB の使用をご覧ください。

IndexedDB データを表示する

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

    IndexedDB メニュー

    図 1. [IndexedDB] メニュー

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

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

    「メモ」データベース

    図 2. notes データベース

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

    「メモ」オブジェクト ストア

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

    • 合計エントリは、オブジェクト ストア内の Key-Value ペアの合計数です。
    • [Key Generator value] が、次に使用可能なキーです。このフィールドは、鍵生成ツールを使用する場合にのみ表示されます。

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

    IndexedDB 値の表示

    図 4. IndexedDB 値の表示

  4. 下の図 6 の title や body などのインデックスをクリックすると、そのインデックスの値に基づいてオブジェクト ストアを並べ替えることができます。

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

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

IndexedDB データを更新する

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

データベースの表示

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

IndexedDB データを編集する

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

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

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