浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【JavaScript】ローカルストレージを使ってタブ間のリアルタイム通信

 JavaScript のローカルストレージはざっくばらんにいえばブラウザの持つドメイン単位のデータの永続化機能です。
Window.localStorage – Web API | MDN
Storage – Web API | MDN
 この機能はドメイン単位というだけあって異なるタブ、ウィンドウで同じドメインの別ページを開いていたとしても同じものを参照します。この機能とローカルストレージのイベントを利用して異なるタブ、ウィンドウの間でリアルタイム通信が可能です。
 これは例えば次のデモです。

 これを複数タブ、複数ウィンドウで動かした結果が次動画です。

 こんな感じでローカルストレージを介することであるタブから別のタブを操作できます。ローカルストレージがセキュリティを気にするつくりではないため、トークン等の認証情報を保存できず使いどころが限られますが、こういったこともできると覚えておくと役に立つ時がくるかもしれません。
 使いどころとしてはあるタブ上で長い処理を初めて別タブで色々しているユーザに完了通知を飛ばすとかでしょうか。少々手間ですが、ローカルストレージ経由で命令を他タブに送り、命令を受けて自動でログアウト処理や API 通信を走らせるのもありかもしれません。

  • この記事いいね! (0)