渋谷ほととぎす通信

Unity・ゲーム開発 技術で一生食べていく情報発信

【Web】localStorageの中身を肉眼で確認する方法

ブラウザにはWeb Storageというローカル保存機能があります。
キーと値をセットで保存できます。

  • sessionStorage => ブラウザを閉じるまで保存
  • localStorage => ブラウザを閉じても保存(永続保存)

👆のように保存期間のちがう2種類の形式があります。
本記事ではlocalStorageを扱います。

保存された値をブラウザから確認する

localStorageは直接確認できませんが、
ブラウザの開発ツールから見ることができます。

サンプルとしてテキストエリアに入力された値をローカル保存してみます。

※サンプルとしてReactを使っていますが特に理由はありません

サンプルコード

※本コードだけでは動きません。あくまでlocalStorageのイメージ共有です

f:id:esakun:20210714082811p:plain

View > Developer > Developer Toolsから開発ツールを開きます。
メニューはブラウザによって微妙に違うかもしれません。

f:id:esakun:20210714082050p:plain

Applicationタブ > LocalStorage > 確認したいURLを選択。
するとKey、Valueという部分に保存されたキーと値がセットになって表示されます。

こちらはリアルタイムに更新されるため、デバッグの役に立つでしょう。

以上です。

環境

  • ブラウザ Brave v1.26.74