Web儲存

東抄西拼

1、兩種方法

• localStorage-存儲的資料沒有時間限制。兩天、兩周或者兩年資料依然可以使用
• sectionStorage-針對一個session的資料存儲（當浏覽器關閉，資料會被清除）

2、與cookie作對比

        cookie不适合大量資料的存儲，因為它們由每個伺服器的請求來傳遞，這使得cookie速度很慢而且效率也不高

localStorage使用方法

localStorage.length  傳回現在已經存儲的變量數目

localStorage.key(n) 傳回第N個變量的鍵值(key)

localStorage.getItem(key) 和localStorage.key一樣，取得鍵值為key的變量的值

localStorage.setItem(key,val) 和localStorage.key=val 一樣，設定鍵值key的變量值

localStorage.removeItem(key) 删除鍵值為key的變量

localStorage.clear() 清空所有變量

localStorage.a = 7; //設定a為"3"

localStorage["a"]="sfsf"; //設定a為"sfsf"，覆寫上面的值

localStorage.setItem("b","isaac"); //設定b為"isaac"

var a1 = localStorage["a"]; //擷取a的值

var a2 = localStorage.a; //擷取a的值

var b = localStorage.getItem("b"); //擷取b的值

localStorage.removeItem("c"); //清楚c的值

JSON.stringify() 存儲在本地，調用JSON.stringify()将其轉為字元串

JSON.parse()  讀取出來後調用JSON.parse()将字元串轉為json格式

   var details = {author:"isaac","description":"fresheggs","rating":100};

    storage.setItem("details",JSON.stringify(details));

    details = JSON.parse(strong.getItem("details"));

HTML5本地存儲隻能存字元串，任何格式存儲的時候都會自動轉為字元串，是以讀取時候需要自己進行類型的轉換。可以通過JSON.parse/JSON.stringify結合使用

測試浏覽器是否支援localStorage

<script>
        if(window.localStorage){
           alert('This browser supports localStorage');
        }else{
            alert('This browser does NOT support localStorage');
        }
    </script>
           

頁面計數

<script>
function draw2(){
            if(localStorage.pagecount){
                localStorage.pagecount = Number(localStorage.pagecount)+1;
            }else{
                localStorage.pagecount =1;
            }
            document.write("Visits:"+localStorage.pagecount+"time(s)");
        }
</script>
           

頁面read and write

<script>
if(localStorage.a){
                txt1.value = localStorage.a;
            }
            if(localStorage.f){
                sty.value =localStorage.f;
            }
            btn1.οnclick=function(){
                localStorage.a = txt1.value;
                localStorage.f = sty.value;
            }
</script>