HTML 5の2つのDOM Storageを利用したカウンター

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

DOM Storageの仕組みを利用したカウンターの例

 HTML 5の仕様では、sessionStorageがウィンドウやタブが開かれている間のみデータを保持するのに対して、localStorageではウィンドウやタブを閉じた後もデータを保持し、originが同じページで共有することはすでに説明した。現時点ではFirefox 3のglobalStorageもlocalStorageと同様に考えてよい。リスト1はその特性を利用したカウンターの例である。

 この例ではlocalStorage.visitsにカウンターの値を保持している。そしてsessionStorage.visitingが設定されていない場合のみカウンターの値を1つ増やすようにしている。

リスト1 DOM Storageを利用したカウンターの例


  
  
    
    DOM Storageの使用例
    
  

  

    

DOM Storageによるカウンター

 最初にページを開いたときにはまだsessionStorage.visitingが設定されていないので、カウンターの値を1つ増やす。そのままページをリロードしたり、別のサイトに行って戻ってきても、sessionStorage.visitingがセットされているのでカウンターは増えない。一方、sessionStorage.visitingは同じウィンドウやタブ内でしか有効でないので、ウィンドウを閉じたり別のタブで開いた場合にはカウンターが増やされるというわけである。

図1 最初にページを表示したときにsessionStorage.visitingがセットされカウントアップする。その後はカウントアップはしない 図1 最初にページを表示したときにsessionStorage.visitingがセットされカウントアップする。その後はカウントアップはしない
図2 別のタブで開いた場合にはsessionStorage.visitingが共有されないのでカウントアップする 図2 別のタブで開いた場合にはsessionStorage.visitingが共有されないのでカウントアップする
  • 新着記事
  • 特集
  • ブログ