データ変更イベントをハンドリングするには?
解説
windowオブジェクトには、ローカルストレージであるかセッションストレージであるかを問わず、データ保持領域の内容が変更された時点で発生する「storage」イベントが存在します。
ここで注意しなければならない点は、このイベントは、追加、更新、削除などの変更を行ったドキュメントのwindowオブジェクトで発生するのではなく、変更を行ったwindowオブジェクトと同一のセッションストレージないしローカルストレージを共有する、別のwindowオブジェクトで発生するということです。
ただし、Internet Explorerは更新を行ったwindowオブジェクト自身でもstorageイベントが発生します。
たとえば、ローカルストレージの場合では、同じオリジン(スキーム、ドメイン、ポートを合わせたもの。ローカルストレージとセッションストレージの違いは?を参照ください)の複数のページでローカルストレージが共有されるため、ある一つのページがローカルストレージのデータを更新した場合には、オリジンを共有するそれ以外のページでstorageイベントが発生します。
同一のページであっても、複数のタブやウィンドウで開かれていた場合は、その一つでローカルストレージの更新が行われれば、他のタブやウィンドウでstorageイベントが発生します。
セッションストレージの場合では、フレーム内のドキュメントと親ドキュメントは、オリジンが同じであればセッションストレージを共有するため、フレーム内のドキュメントでセッションストレージのデータを更新した場合、親ドキュメントではstorageイベントが発生します。
どちらの場合も、Internet Explorerを除いて、更新を行ったドキュメント自体ではイベントは発生しません。
storageイベントの使い方
Web Storageでは、ローカルストレージとセッションストレージで条件は異なりますが、異なるウィンドウ、タブ、フレームから、同じデータ保持領域にアクセスすることができます。
こうした状況で、他のウィンドウやタブによって、保存されていたデータが予期せず変更されてしまった場合、データの整合性などに問題が発生する可能性があります。
こうした問題を避けるため、storageイベントは「別のウィンドウやタブでデータが変更された」ことを検知するために使用することができます。
以下の例では、別のタブやウィンドウによるローカルストレージの変更を監視し、変更されたのがキー「"myKey"」で、値が「"myData"」以外になっていた場合にログに出力しています。
var storage = localStorage;
var key = "myKey";
var data = "myData";
storage.setItem(key,data);
window.onstorage = function(event){
if(event.key == key && event.newValue != data){
console.log("データが変更されました");
}
}
storageイベントで取得できる情報
storageイベントのハンドラの引数はStorageEventオブジェクトで、行われた変更に関する情報を格納した、以下の属性を持ちます。
以下の例では、データ変更イベント時に、行われた変更の各情報をログに書き出しています。
window.onstorage = function(event){
console.log(event.key);
console.log(event.oldValue);
console.log(event.newValue);
console.log(event.url);
}
関連項目