【javascript】sessionStorageを使ってデータを保存してみよう

sessionStorageとは

sessionStorageとはlocalStorageと同じようにクライアント側（ブラウザ）でデータを保存することができます。
しかし、sessionStorageを使用した場合はページのセッションが終了したとき（ページを閉じたとき）に保存したデータも消去されます。
localStorageを使ったデータの保存方法はこちら。

sessionStorageの操作方法

sessionStorageに値を保存する

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

keyとvalueを引数に設定し、sessionStorageにkeyとvalueのセットを保存します。

sessionStorageからデータを取得する

sessionStorage.getItem( [key] );

keyを引数に設定し、指定されたkeyでsessionStorageに保存した値を取得します。

sessionStorageに登録されているセットを削除する

sessionStorage.removeItem( [key] );

keyを引数に設定し、指定されたkeyをsessionStorageから削除します。

サンプル

sessionStorageに値をセットしたり削除したりするサンプル

サンプルコード

window.addEventListener( 'load', function( ){
    var key219 = document.querySelector( '#key-219' );
    var value219 = document.querySelector( '#value-219' );
    var setBtn219 = document.querySelector( '#set-btn-219' );
    var removeBtn219 = document.querySelector( '#remove-btn-219' );
    var sessionStorage219 = document.querySelector( '#sessionStorage-219' );
    displaySessionStorage();

    setBtn219.addEventListener( 'click', handleSetBtnClick, false );
    function handleSetBtnClick( e ){
        var key = key219.value;
        var value = value219.value;
        if( key ){
            sessionStorage.setItem( key, value );
            displaySessionStorage();
        }
    }

    removeBtn219.addEventListener( 'click', handleRemoveBtnClick, false );
    function handleRemoveBtnClick( e ){
        var key = key219.value;
        sessionStorage.removeItem( key );
        displaySessionStorage();
    }

    function displaySessionStorage( ){
        sessionStorage219.innerText  = "";
        for( var i = 0; i < sessionStorage.length; i++ ){
            if( i > 0 )
                sessionStorage219.innerText += ", ";

            var key = sessionStorage.key( i );
            sessionStorage219.innerText += key + ":" + sessionStorage.getItem( key );
        }
    }
} );

下のテキストボックスの「keyの値」と「valueの値」何か入力し、「setItem」ボタンを押すと入力したデータを保存する。
「keyの値」に登録されているkeyを入力し、「removeItem」ボタンを押すとkeyに対応するデータを削除する。
keyの値:
valueの値:

現在のsessionStorage: