ローカルストレージに保存されたデータをChrome上で確認する方法

JS:ローカルストレージの基本プログラミング関連
スポンサーリンク

ローカルストレージに保存されたデータをChrome上で確認する方法
JavaScriptでlocalStorage.setItemsessionStorage.setItemなどを使って保存したデータはブラウザChrome上で確認や変更、削除などが出来ます。今回はローカルストレージにデータが保存されているものとして解説します。

まずは、サイト上で右クリックして検証を選択。
Chromeの開発者モード表示

Applicationタブを選択する。
注)タブ名にElements, Console, Sourcesなどと表示されているはず。Applicationという項目は隠れている可能性があるので≫をクリックして隠れたタブを表示してApplicationを選択する。

JS:ローカルストレージの基本

Storageという項目にLocal StorageSession Storageという項目があるのでクリック。階層以下にアップロード先のURLが表示されているはずなので、クリック。

JS:ローカルストレージの基本

KeyValueという項目でストレージキーごとにデータが可視化されている。
上記画像では、MYCOLORというストレージキーのデータ内容にtealという文字列が保存されているという意味になる。

この画面からストレージ内容の消去が可能。(ゴミ箱アイコンのClear Storageという項目を選択するか、キーごとに右クリックして削除も可能)

また、Valueのデータ内容はダブルクリックすると変更することもできる。(上記画像でいうとtealというデータ文字列部分をダブルクリックすると変更可能)
ただし、Googleなどが保存したストレージキーを変更したり消去する場合は注意が必要

以上、ローカルストレージに保存されたデータをChrome上で確認する方法でした。

参考

JS:ローカルストレージの基本
今回ローカルストレージの例として取り上げるのは、サイトの背景色を変更すると、次回アクセスした際に同じ背景色で表示されるというものです。

コメント