HTML5/JavaScriptのストレージイベントハンドラーの使い方

ストレージイベントハンドラーとは

HTML5のWeb Storage APIには、ストレージの変更を検知するためのstorageイベントが用意されています。ここで重要なのは、storageイベントハンドラーは別のウィンドウ（タブ）からストレージ操作が行われた場合にのみ発火するという仕様です。同じウィンドウ内でsessionStorageやlocalStorageの値を変更しても、そのウィンドウ自身のハンドラーは呼び出されません。

この仕組みは、複数のタブ間でデータの同期を取る際に非常に役立ちます。以下のコードで実際の動作を確認できます。

サンプルコード

// イベントハンドラーの登録
window.addEventListener('storage', storageEventHandlerFunc, false);

function storageEventHandlerFunc(evt) {
    alert("Storage event called key: " + evt.key);
    switch(evt.key){
        case 'one':
        case 'two': batteryDCMeter(); break;
        case 'extPowerOn': rechargeBattery(); break;
    }
}
sessionStorage.setItem("someKey", "someValue");

コードの解説

このコードでは、window.addEventListener()を使ってstorageイベントのリスナーを登録しています。イベントが発生すると、コールバック関数内で変更されたキー名をevt.keyプロパティから取得できます。あとはswitch文で分岐させることで、キーの種類に応じた個別の処理を実行可能です。

なお、上記の例のように同じスクリプト内でsessionStorage.setItem()を実行しても、イベントは発火しません。動作を確認するには、同じオリジンのページを別のタブやウィンドウで開き、そちらからストレージの値を変更する必要があります。

storageイベント利用時の注意点

• イベントを受け取れるのは、同一オリジン（プロトコル・ドメイン・ポートが一致）の他のウィンドウのみです。
• 値が実際に変更された場合にのみイベントが発生し、同じ値をセットした場合は発火しません。
• イベントオブジェクトには、key、oldValue、newValue、urlなどの有用なプロパティが含まれています。

複数タブ間の状態共有やリアルタイムなUI更新を実現したい場合は、storageイベントを活用することで、効率的かつシンプルに実装できます。