Storageイベントを監視する
storageイベントでタブ間のストレージ変更に対応します
「Storageイベントを監視する」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
タブ間通信
localStorageが変更されると、Web Storageは同一オリジンにある他のすべてのタブでstorageイベントを発生させます。これは、同じアプリを複数のタブで開いている場合に状態を同期する最も簡単な方法です。たとえば、ログアウトやテーマの切り替えを伝播できます。
リスナーの登録
ハンドラーをwindowに登録します。window.addEventListener("storage", handleStorage)のように記述してください。リスナーが発火するのは、同一オリジンにある他のタブやウィンドウだけです。変更を行ったタブ自身では発火しません。そのタブはすでに更新を把握しているためです。
window.addEventListener("storage", (e) => {
console.log("key:", e.key, "new:", e.newValue);
});StorageEventのプロパティ
イベントには、変更されたキーを示すkey、文字列またはnullのoldValueとnewValue、変更を発生させたページを示すurl、そしてStorageオブジェクトを示すstorageArea（localStorageまたはsessionStorage）が含まれます。
clear()はkeyをnullに設定する
別のタブでlocalStorage.clear()が呼び出されると、ストレージイベントが1回発生し、key === nullになります。また、oldValueとnewValueもどちらもnullになります。このパターンを検出すると、1つのキーの更新と一括消去を別々に処理できます。
removeItemの動作
removeItemを呼び出すと、newValue === nullでイベントが発生し、oldValueには以前の文字列が入ります。newValueが文字列の「null」ではなく厳密なnullであることを確認して、「キーが削除された」場合と「キーがnullという文字列に設定された」場合を区別してください。
同じタブでは発火しない制限
変更を書き込んだタブでは、イベントは決して発火しません。自分自身の書き込みに反応するには、setItemの後にカスタムイベントを発生させるか、Storage APIの呼び出しとアプリ内イベントバスの呼び出しを両方行うヘルパーでsetItemをラップしてください。
function setItem(key, val) {
localStorage.setItem(key, val);
window.dispatchEvent(new CustomEvent("local-storage", { detail: { key, val } }));
}タブ間ログアウト
ユーザーがログアウトするとき、タイムスタンプを付けてauth:logoutのようなキーを設定します。他のタブはstorageイベントでそのキーを監視し、自身のセッション状態を直ちにクリアしてログインページへリダイレクトします。ユーザーがもう一度クリックする必要はありません。
テーマと設定の同期
ユーザーが1つのタブでテーマを切り替えたら、themeをlocalStorageに書き込みます。他のすべてのタブのストレージハンドラーが新しい値を読み取り、document.documentElement.dataset.themeを適用します。変更は開いているすべてのタブに即座に反映されます。
キーによるフィルタリング
e.keyの値に応じて分岐すれば、1つのハンドラーで多くの機能に対応できます。switch文を使うとディスパッチャーを読みやすく保てます。各caseで1つのストレージキーを処理し、他の機能が同じStorageに書き込んだ無関係な変更は無視します。
sessionStorageはタブ間で共有されない
sessionStorageはタブ単位です。各タブが独立したsessionStorageを持つため、書き込みによって他のタブでstorageイベントが発生することはありません。タブ間のシグナリングが必要な場合は、キーを直後に削除するとしてもlocalStorageを使用してください。
BroadcastChannelという代替手段
より柔軟なタブ間メッセージングには、BroadcastChannel APIを使用すると、ストレージに触れずに構造化データを送信できます。new BroadcastChannel("app").postMessage({ type: "logout" })のように記述します。一時的なシグナルにはBroadcastChannelを、保持も必要な状態にはストレージイベントを使用してください。
理解度チェック
Tab AがlocalStorage.setItem("theme", "dark")を呼び出した場合、どのタブがstorageイベントを受け取りますか？
まとめ
別のタブでlocalStorageが変更されると、storageイベントによってタブ間の通知が配信され、key、oldValue、newValue、storageAreaを取得できます。書き込みを行ったタブでは発火しないため、ローカルとリモートの両方に完全にディスパッチするにはカスタムイベントと組み合わせてください。ログアウトの伝播、テーマの同期、ブラウザーウィンドウ間で一貫性を保つ必要がある状態に使用できます。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 40
- レッスン
- 159
よくある質問
「Storageイベントを監視する」レッスンは無料ですか？
はい。「Storageイベントを監視する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「Storageイベントを監視する」で何を学びますか？
storageイベントでタブ間のストレージ変更に対応します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「Storageイベントを監視する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。