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: