セッション ストレージを表示、編集する

Sofia Emelianova
Sofia Emelianova

このガイドでは、Chrome DevTools を使用して sessionStorage Key-Value ペアを表示、編集、削除する方法について説明します。ページ セッションが終了すると、セッション ストレージは消去されます。

sessionStorage のキーと値を表示する

  1. 検証するウェブサイトで DevTools を開きます

  2. [Application] > [Storage] に移動し、[Session Storage] を開きます。ドメインをクリックして、その Key-Value ペアを表示します。

    youtube.com の Key-Value ペア。

  3. 表の下にある値をプレビューするには、ペアを選択します。

    選択したキーの値を表示しています。

Key-Value ペアを手動で更新するには、上部にあるアクションバーの [] 更新をクリックします。

Key-Value ペアをフィルタする

必要な Key-Value ペアをすばやく見つけるには、上部のフィルタ ボックスに、キーまたは値に含まれる文字列を入力します。

文字列「false」が含まれていない Key-Value ペアを除外します。

新しい sessionStorage Key-Value ペアを作成する

  1. ドメインの sessionStorage Key-Value ペアを表示する。たとえば、こちらのデモページをご覧ください。
  2. テーブルの空白部分をダブルクリックします。DevTools によって新しい行が作成され、[Key] 列にカーソルが移動します。
  3. 新しい Key-Value ペアを入力します。

sessionStorage のキーまたは値を編集する

  1. ドメインの sessionStorage Key-Value ペアを表示する。たとえば、こちらのデモページをご覧ください。
  2. [Key] 列または [Value] 列のセルをダブルクリックして、そのキーまたは値を編集します。
  3. ページを更新して適用します。

sessionStorage Key-Value ペアを削除する

  1. ドメインの sessionStorage Key-Value ペアを表示する。たとえば、こちらのデモページをご覧ください。
  2. Key-Value ペアをクリックして選択します。
  3. 上部のアクションバーで 削除] をタップします。 [削除] をクリックして、選択したペアを削除します。 選択した Key-Value ペアを削除します。
  4. または、すべて消去] をタップします。 [すべてクリア] をクリックして、すべてのペアを削除します。

コンソールから sessionStorage を操作する

Console で JavaScript を実行でき、Console はページの JavaScript コンテキストにアクセスできるため、Console から sessionStorage を操作できます。

  1. DevTools で [コンソール] を開きます。
  2. 現在のページ以外のドメインの sessionStorage キー値ペアにアクセスする場合は、上部にあるアクションバーのコンテキスト プルダウン メニューから必要なJavaScript コンテキストを選択します。
  3. JavaScript の場合と同様に、コンソールsessionStorage 式を実行します。

コンソールから sessionStorage を操作する