HTML 5におけるsessionStorageとlocalStorageの違い

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

2つのDOM Storageの動作の違いを確認する

 リスト1は、以前紹介したsessionStorageのデータを一覧表示する例を書き換え、sessionStorageとlocalStorage(Firefox 3の場合はglobalStorage)の両方のデータを一覧で表示するようにしたものである。[リストを表示]ボタンをクリックするとそれぞれのデータがテーブルに表示される。

リスト1 sessionStorageとlocalStorageの全データを一覧表示する例


  
  
    
    DOM Storageのデータを一覧表示
    
  

  

    

データの一覧表示

localStorageのデータ
キー
sessionStorageのデータ
キー

 さて、ここでは前回使ったカウンターとこのページを同じoriginに配置し、まずカウンターのページをFirefoxで表示する。その上で、新しいタブを開いてこのページを開いてみる。ただしFirefoxの場合はlocalStorageでなくglobalStorageなので、厳密にHTML 5の動作を試したい場合にはSafari4やIE8などを使うといいだろう。

 表示結果は図1のようになり、localStorage.visitsはタブが違っても共有されているのに対して、sessionStorage.visitingは共有されないことがわかる。

図1 新しいタブで表示したとき 図1 新しいタブで表示したとき

 もしカウンターののページを開いた後に同じタブで続けてリスト1を開いた場合には、当然図2のようにsessionStorage.visitingの値も表示されるはずだ。

図2 カウンターのページを開いたタブで、続けて表示したとき 図2 カウンターのページを開いたタブで、続けて表示したとき
  • 新着記事
  • 特集
  • ブログ