Edited at

sessionStorageをつかってみる


そもそも

WebStorageという仕組みがHTML5から導入されています。

WebStorageはJSを用いてブラウザにデータを保存できる、Cookieよりもカジュアルに利用可能な仕組みであります。

利用方法は2種類あって、一つがlocalStorage、もう一つが今回のsessionStorageです。

基本的な使い方は変わりませんが、ライフサイクルが異なります。

双方のライフサイクルは以下の通り。

WebStorage
localStorage
sessionStorage

ライフサイクル
ブラウザを閉じても持続
ブラウザを開いてる間のみ


対応ブラウザ

MDN的には対応ブラウザは以下の通り。

機能
Chrome
Firefox (Gecko)
Internet Explorer
Opera
Safari (WebKit)

localStorage
4
3.5
8
10.50
4

sessionStorage
5
2
8
10.50
4

もしくはブラウザのコンソールに下記のコードを貼り付けて確認可能です。

-> @ryo511 さんからのご指摘を反映しました(2019/01/17更新)

function storageAvailable(type) {

try {
var storage = window[type],
x = '__storage_test__';
storage.setItem(x, x);
storage.removeItem(x);
return true;
}
catch(e) {
return e instanceof DOMException && (
// everything except Firefox
e.code === 22 ||
// Firefox
e.code === 1014 ||
// test name field too, because code might not be present
// everything except Firefox
e.name === 'QuotaExceededError' ||
// Firefox
e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
// acknowledge QuotaExceededError only if there's something already stored
storage.length !== 0;
}
}

console.log(storageAvailable('localStorage'));

参考: localStorage の機能検出


使い方

sessionStorageはkeyとvalueを対に持っています。

よって保存する際はkeyとvalueを、取得・削除する際はkeyを指定して操作します。

ちなみにkeyは文字列と整数を利用できますが、値は文字列のみのようです。


保存

下記3行は全て同じ意味です。

sessionStorge.key = 'value';

sessionStorage['key'] = 'value';
sessionStorage.setItem('key', 'value');


取得

sessionStorage.getItem('key')


削除

sessionStorage.removeItem('key')


初期化

sessionStorage.clear()


まとめ

以上のようにシンプルにブラウザにデータを持たせて利用することができます。

例えばページ遷移する際に、通信はしたくないけど前のページの情報を持っていたい場合などに使えそうですね!