HTML 5のDOM Storageに対する変更を伝えるイベント

杉山貴章(オングス)
2008-12-15 08:00:00
  • このエントリーをはてなブックマークに追加

StorageEventでDOM Storageの変更を知る

 HTML 5には、DOM Storageに対する変更を通知するためのStorageEventというイベントが用意されている。もしStorageオブジェクトのプロパティの値が変更されたり、setItem()やremoveItem()などのメソッドが呼び出された場合にはこのイベントが通知されるため他のページやスクリプトでDOM Storageの値が変えられた場合でも即座にそれを知ることができる。StorageEventオブジェクトは属性として次のような値を保持する。

  • key - 変更されたアイテムのキー
  • oldValue - 変更前の値
  • newValue - 変更後の値
  • url - イベント発生元のURL
  • source - イベント発生元のWindowオブジェクト

 HTML 5のドラフトではこのイベントはWindowオブジェクトの"onstorage"というイベント名で定義されている。したがって、リスト1のようにしてonstorageイベントを受け取るようにリスナを設定しておけばよい。

リスト1 onstorageイベントを受け取るリスナの登録

window.addEventListener('onstorage', リスナ関数, false);

 ただし、Firefox 3にはこの仕様はまだ反映されていない。Firefox 3の場合はonstorageではなく"storage"イベントとして実装されている。

 リスト2はonstorageイベントを受け取ることでDOM Storageに対する変更を監視する例である。

リスト2 onstorageイベントでDOM Storageへの変更を監視する例


  
  
    
    StorageEventの使用例
    
  

  
    

StorageEventの使用例

 この例では、異なるWindowオブジェクトでDOM Storageのデータが変更されたらキーと新旧の値、URLをダイアログで通知する。この例の場合は同じWindowオブジェクトは無視するようにしてあるが、SorageEventそのものはsessionStorageとlocalStorageのどちらに対しても有効だ。

  • 新着記事
  • 特集
  • ブログ