ローカル ストレージの表示と編集

Kayce Basques

Sofia Emelianova

このガイドでは、Chrome DevTools を使用して localStorage キー値ペアを表示、編集、削除する方法について説明します。ローカル ストレージでは、複数のブラウザ セッションにわたってデータが保存されます。

localStorage のキーと値を表示する

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

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

   

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

   

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

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

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

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

1. ドメインの localStorage の Key-Value ペアを表示する。（例: こちらのデモページ）。
2. テーブルの空白部分をダブルクリックします。DevTools で新しい行が作成され、[Key] 列にカーソルがフォーカスされます。
3. 新しい Key-Value ペアを入力します。

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

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

localStorage Key-Value ペアを削除する

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

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

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

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