sessionStorageをつかってみる

そもそも

WebStorage という仕組みが HTML5 から導入されています。
WebStorage は JavaScript を用いてブラウザにデータを保存できる、Cookie よりもカジュアルに利用可能な仕組みであります。
利用方法は2種類あって、一つが localStorage, もう一つが今回の sessionStorage です。
基本的な使い方は変わりませんが、ライフサイクルが異なります。

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

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

対応ブラウザ

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

機能	Chrome	Firefox (Gecko)	Edge	Internet Explorer	Opera	Safari (WebKit)
localStorage	4	3.5	12	8	10.50	4
sessionStorage	5	2	12	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行は全て同じ意味です。

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

取得

sessionStorage.getItem('key')

削除

sessionStorage.removeItem('key')

初期化

sessionStorage.clear()

まとめ

以上のようにシンプルにブラウザにデータを持たせて利用することができます。
例えばページ遷移する際に、通信はしたくないけど前のページの情報を持っていたい場合などに使えそうですね！