各ブラウザでWebStorage（LocalStorage）を確認する方法

背景

CookieからWebStorageに移行するにあたって、ブラウザによって確認方法が異なったので作成しました。

ブラウザ毎の確認方法

Chrome

1. 開発者ツール（F12）を開く
2. ApplicationタブにLocal Storageがあるので、そこで確認する

FireFox

1. 開発者ツール（F12）を開く
2. ストレージタブにローカルストレージがあるので、そこで確認する

IE,Egde

1. 開発者ツール（F12）を開く
2. コンソールタブを開き、画面下部にjavascriptで記述する
例）localStorage.getItem('hogehoge');

タブレット、スマートフォン

基本的な確認はCookieの確認方法（https://appbu.jp/iphone-safari-cookie） と同じです。
1. 適当なページにアクセスし、ブックマークを作成する
※ブックマークの名前はlocalStorage確認用であることが分かるような名前だとよいかも
2. ブックマークを編集し、URL欄に確認用のjavascriptを書き込む
ex) javascript:alert(localStorage.getItem(('hogehoge'));
3. localStorageに保存されているドメインのページにアクセスし、手順1,2で作成したブックマークを開く
4. ポップアップでlocalStorageの値が表示される。

消し方

localStorageの消し方はChrome、FireFoxの場合は開発者ツールのGUI操作で消せます。
その他に関しては以下のjavascriptで消せます
- 特定のlocalStorageのみ削除する場合
localStorage.removeItem('hogehoge');
- すべてのlocalStorageを削除する場合
localStorage.clear();

余談

Cookieと違ってキー指定しないと取れないので結構めんどくさいですねー。もっと楽な方法ないかなー。
sessionStorageの場合はlocalStorageをそれぞれ読み替えてください。