window.sessionStorage - 雑多なブログ

ブラウザのsessionStorageプロパティでsession storageにアクセスできる。特徴は次の通り。

window.localStorage に似ている（インターフェースが同じ）
新しいタブ・ウィンドウで開くと新しいセッションが開始される
配列やオブジェクトはシリアライズして保存する。
サーバサイドのセッションとは全くの別物。
有効期限はブラウザやウィンドウ・タブを閉じるまで。

うーん。使い所のイメージがパッと湧かない。

window.localStorage に似ている

インターフェースはlocalStorageと同じ。

sessionStorage.key(num)
セッションストレージ内のnum番目のキーを返す。

sessionStorage.getItem(key)
キーの値を返す。

sessionStorage.removeItem(key)
セッションストレージからキーを削除する。

sessionStorage.clear()
セッションストレージをクリアする。

sessionStorageに配列やオブジェクトを格納する

直接配列やオブジェクトを保存する事はできない。配列はカンマ区切りのテキストに変換されてしまう。多次元配列に関しては、もはや元の構造が復元不可能。

下記はchromeのデベロッパーツールで実行した結果。

sessionStorage.setItem('ary', [1, [2, [3, 333, 3333], 4]])
undefined
sessionStorage.getItem('ary')
"1,2,3,333,3333,4"

オブジェクトを保存すると省略されてしまい、
そもそも値が消えてしまう。

sessionStorage.setItem('obj', {value: 'hello'})
undefined
sessionStorage.getItem('obj')
"[object Object]"

どうしても、配列やオブジェクトをセッションストレージに保存したい場合はJSON.stringifyで文字列に変換し、JSON.parseで復元すると良さそう。

下記は実行例

sessionStorage.setItem('obj', JSON.stringify({value: 'hello'}))
undefined
sessionStorage.getItem('obj')
"{\"value\":\"hello\"}"
JSON.parse(sessionStorage.getItem('obj'))
{value: "hello"}