Storage

Storageオブジェクトには、LocalStorageとSessionStorageの2種類がある。

１．SessinStorage
  ブラウザを閉じるとデータが消えてしまう。

２．LocalStorage
　・ブラウザを閉じてもデータは残る
　・ブラウザにKey-Value型で保存される。
　・デベロッパツールのResourcesタグのLocalStorage項目で確認できる
　・重要な情報を保存するのは望ましくない（個人情報。。）
　・メソッド
　getItem(key)
  setItem(key, 値)
  removeItem(key)
  clear() LocalStorageにあるデータをすべて削除

　・キー：値　 --> 1:n　可能
　　キー一つに対して複数の値を保存できる
　　複数の値は、JSONというデータのフォーマットで設定する
　　LocalStorageに設定：JSON.stringify({'key1':value, "key2:value"}) --> Objectを文字列
    LocalStorageから取得：JSON.parse("{'key1:value,''key2:value'}");--> 文字列をObject

        <script type="text/javascript">
            var keyEl = $("key");
            var valEl = $('val');
            $('save').addEventListener('click', save(keyEl,valEl));
            $('display').addEventListener('click', display(keyEl));
            $('remove').addEventListener('click', remove(keyEl));
            $('clear').addEventListener('click', clear());
            function save(keyEl,valEl){
                return function (){                  
                    var arrayOfValue = valEl.value.split(",");
                    var objOfValue = {};
                    arrayOfValue.forEach(function (item, index){
                        debugger;
                        objOfValue[index] = item;
                    });
                 
                    window.localStorage.setItem(keyEl.value, JSON.stringify(objOfValue));
                    window.sessionStorage.setItem(keyEl.value, JSON.stringify(objOfValue));
                };
            }
         
            function display(){
                return function (){ // {key1:{0:val1,1:val2}, key2:{0:val1,1:val2}} key1 : val1,val2
                    var storage = window.localStorage;
                    var print = "";
                    for(keyOfStorage in storage){
                        var arrayValue = storage[keyOfStorage];
                        var objVal = JSON.parse(arrayValue);                      
                        var displayVal = "";
                        var keys = Object.keys(objVal); // {0:val1,1:val2} --> [0,1]
                        for(var idx = 0; idx < keys.length; idx++){
                            displayVal = displayVal + objVal[idx];
                            if(idx < keys.length -1){
                                displayVal = displayVal + ',';
                            }
                        }
                        var line = keyOfStorage + ":" + displayVal + '<br>';
                        var print = print + line;
                    }

                  $('content').innerHTML = print;
                };
            }
         
            function remove(keyEl){
                return function(){
                  window.localStorage.removeItem(keyEl.value);
                };
            }
         
            function clear(){
                return function(){
                  window.localStorage.clear();
                };
            }
         
            function $(id){
                return document.getElementById(id);
            }
        </script>