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

localStorageとは

localStorageとはcookieのようにクライアント側（ブラウザ）でデータを保存することができます。
cookieを使ったデータの保存方法はこちら。

localStorageの操作方法

localStorageに値を保存する

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

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

localStorageからデータを取得する

localStorage.getItem( [key] );

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

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

localStorage.removeItem( [key] );

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

サンプル

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

サンプルコード

window.addEventListener( 'load', function( ){
    var key214 = document.querySelector( '#key-214' );
    var value214 = document.querySelector( '#value-214' );
    var setBtn214 = document.querySelector( '#set-btn-214' );
    var removeBtn214 = document.querySelector( '#remove-btn-214' );
    var localStorage214 = document.querySelector( '#localStorage-214' );
    displayLocalStorage();

    setBtn214.addEventListener( 'click', handleSetBtnClick, false );
    function handleSetBtnClick( e ){
        var key = key214.value;
        var value = value214.value;
        if( key ){
            localStorage.setItem( key, value );
            displayLocalStorage();
        }
    }

    removeBtn214.addEventListener( 'click', handleRemoveBtnClick, false );
    function handleRemoveBtnClick( e ){
        var key = key214.value;
        localStorage.removeItem( key );
        displayLocalStorage();
    }

    function displayLocalStorage( ){
        localStorage214.innerText  = "";
        for( var i = 0; i < localStorage.length; i++ ){
            if( i > 0 )
                localStorage214.innerText += ", ";

            var key = localStorage.key( i );
            localStorage214.innerText += key + ":" + localStorage.getItem( key );
        }
    }
} );

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

現在のlocalStorage: