HTML 5のsessionStorageを利用してブラウザにデータを保存する

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

sessionStorageの使用方法

 sessionStorageはStorageインタフェースのインスタンスであり、Windowオブジェクトのプロパティとして定義されている。したがって"sessionStorage"または"window.sessionStorage"としてアクセスできる。

 保存するデータはキーと値をペアとし、sessionStorageオブジェクトのプロパティとして扱うことができる。キーと値にはDOMStringオブジェクト、すなわち文字列を指定する。例えば"Ziddy"という値をキー"username"として保存したい場合には、リスト1のようにすればよい。値にオブジェクトを指定したとしても、ストレージには文字列表現で保存される。

リスト1 sessionStorageにデータを保存する

sessionStorage.username = "Ziddy";

 データを取り出す場合にはリスト2のようにする。

リスト2 sessionStorageから保存したデータを取得する

var username = sessionStorage.username;

 データを削除したい場合には、delete演算子を用いてリスト3のようにする。

リスト3 sessionStorageに保存したデータを削除する

delete sessionStorage.username;

 またデータをプロパティとして扱う以外に、Storageインタフェースの関数を直接呼び出してデータの保存や参照、削除を行うこともできる。それぞれリスト4のように記述する。

リスト4 Storageインタフェースの関数を呼び出してデータを操作する

// データの保存
sessionStorage.setItem('username', 'Ziddy');
// データの参照
var username = sessionStorage.getItem('username');
// データの削除
sessionStorage.removeItem('username');

 なお、localStorageの場合も基本的な使い方は変わらない。sessionStorageもlocalStorageもStorageインタフェースで定義されたオブジェクトである。両者の違いは、sessionStorageがトップレベルのコンテキストでのみデータを共有するのに対して、localStorageはoriginが同じページでデータを共有するということだ。

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