このガイドでは、Chrome DevTools を使用して sessionStorage
の Key-Value ペアを表示、編集、削除する方法を説明します。セッション ストレージは、ページ セッションが終了すると消去されます。
sessionStorage
個のキーと値を表示
検査するウェブサイトで DevTools を開きます。
[Application] > [Storage] に移動して [Session Storage] を展開します。ドメインをクリックして、Key-Value ペアを表示します。
表の下の値をプレビューするには、ペアを選択します。
Key-Value ペアを手動で更新するには、上部のアクションバーで [Refresh] をクリックします。
Key-Value ペアをフィルタする
必要な Key-Value ペアをすばやく見つけるには、上部のフィルタ ボックスに、そのキーまたは値に含まれる文字列を入力します。
新しい Key-Value ペア sessionStorage
を作成する
- ドメインの
sessionStorage
Key-Value ペアを表示する。たとえば、こちらのデモページをご覧ください。 - 表の空の部分をダブルクリックします。DevTools で新しい行が作成され、[キー] 列にカーソルが移動します。
- 新しい Key-Value ペアを入力します。
sessionStorage
個のキーまたは値を編集
- ドメインの
sessionStorage
Key-Value ペアを表示する。たとえば、こちらのデモページをご覧ください。 - [キー] 列または [値] 列のセルをダブルクリックして、キーまたは値を編集します。
- ページを更新して適用してください。
sessionStorage
個の Key-Value ペアを削除します
- ドメインの
sessionStorage
Key-Value ペアを表示する。たとえば、こちらのデモページをご覧ください。 - Key-Value ペアをクリックして選択します。
- 上部のアクションバーで [削除] をクリックして、選択したペアを削除します。
- または、 [すべてクリア] をクリックしてすべてのペアを削除します。
コンソールで sessionStorage
を操作する
コンソールで JavaScript を実行でき、コンソールはページの JavaScript コンテキストにアクセスできるため、コンソールから sessionStorage
を操作できます。
- DevTools でコンソールを開きます。
- 表示しているページ以外のドメインの
sessionStorage
Key-Value ペアにアクセスするには、上部のアクションバーにあるコンテキスト プルダウン メニューから、必要な JavaScript コンテキストを選択します。 - JavaScript の場合と同様に、コンソールで
sessionStorage
式を実行します。