JSのLocalStorageを使う。
- JS.WebStorage.LocalStorage.20210111180901
LocalStorageに保存したデータはブラウザを閉じても削除されない。storageイベントを用いればタブ間で同期できる。
storage イベント動作確認する方法
このページをブラウザの2つのタブで開く。最初のタブに戻るとイベントが発生している。
- ブラウザを起動する
- タブAでこのページを開く(ログを表示させる(Chromeならデベロッパツールで))
- タブBでこのページを開く(ログを表示させる(Chromeならデベロッパツールで))
- タブAに戻ってログを見る
- storageイベントが発生している
storage イベントの用途
異なるタブ間におけるデータ同期。storageイベントは異なるタブ間におけるデータ同期が目的である。LocalStorageに保存したデータは異なるタブ間においても共有される。しかしタブAで値を変更したとき、タブBはまだ変更前の値である。タブAで変更したタイミングでタブBでも変更したいときにstorageイベントを用いる。