投稿日:

【javascript】cookieとlocalStorageとsessionStorageの違い

cookieの使い方はこちら
localStorageの使い方はこちら
sessionStorageの使い方はこちら

サーバーにデータを送信するかしないか

cookieではページのリクエスト（リンクを踏んで移動する時など）を送信した際に、cookieの情報もサーバーに送信される。一方localStorageとsessionStorageはサーバーに送信されないという違いがある。

容量の違い

cookieは5KB程度までしかデータを保存できないが、localStorage、sessionStorageでは利用するブラウザによって容量が違うが、およそ5MBぐらいはデータを保存できる。

有効期限の違い

cookieは有効期限を設定する事ができる。ただし、設定しなかった場合はブラウザを閉じるとデータが消去される。localStorageでは半永久的にデータが保存され、sessionStorageではそのページを開いている間だけ使用する事ができる。

アクセスできる範囲（スコープ）の違い

cookieとlocalStorageでは、別ウィンドウでも同じデータにアクセスする事ができるが、sessionStorageでは開いているウィンドウで設定したデータは、その開いているウィンドウでしかアクセスすることができない。

まとめ

cookieとlocalStorageとsessionStorageの違いを表にまとめると、下記のようになります。

種類 サーバに送信 容量 有効期限 スコープ
cookie ○ 5KB程度 設定による 共有
localStorage × 5MB（ブラウザによる） 半永久 共有
sessionStorage × 5MB（ブラウザによる） ウィンドウ・タブを閉じるまで そのウィンドウ・タブのみ
投稿日:

【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: