localStorage使用總結

1、什麼是localStorage、sessionStorage

在HTML5中，新加入了一個localStorage特性，這個特性主要是用來做爲本地存儲來使用的，解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間爲4k)，localStorage中通常瀏覽器支持的是5M大小，這個在不一樣的瀏覽器中localStorage會有所不一樣。

2、localStorage的優點與侷限

localStorage的優點

一、localStorage拓展了cookie的4K限制

二、localStorage會能夠將第一次請求的數據直接存儲到本地，這個至關於一個5M大小的針對於前端頁面的數據庫，相比於cookie能夠節約帶寬，可是這個倒是隻有在高版本的瀏覽器中才支持的

localStorage的侷限

一、瀏覽器的大小不統一，而且在IE8以上的IE版本才支持localStorage這個屬性

二、目前全部的瀏覽器中都會把localStorage的值類型限定爲string類型，這個在對咱們平常比較常見的JSON對象類型須要一些轉換

三、localStorage在瀏覽器的隱私模式下面是不可讀取的

四、localStorage本質上是對字符串的讀取，若是存儲內容多的話會消耗內存空間，會致使頁面變卡

五、localStorage不能被爬蟲抓取到

localStorage與sessionStorage的惟一一點區別就是localStorage屬於永久性存儲，而sessionStorage屬於當會話結束的時候，sessionStorage中的鍵值對會被清空

3、localStorage的使用

首先在使用localStorage的時候，咱們須要判斷瀏覽器是否支持localStorage這個屬性

if(！window.localStorage){

 alert("瀏覽器不支持localstorage");

 return false;

}else{

 //主邏輯業務

 

}

localStorage的寫入，localStorage的寫入有三種方法，這裏就一一介紹一下

        if(！window.localStorage){

            alert("瀏覽器支持localstorage");

            return false;

        }else{

            var storage=window.localStorage;

            //寫入a字段

            storage["a"]=1;

            //寫入b字段

            storage.a=1;

            //寫入c字段

            storage.setItem("c",3);

            console.log(typeof storage["a"]);

            console.log(typeof storage["b"]);

            console.log(typeof storage["c"]);

        }

if(！window.localStorage){

            alert("瀏覽器支持localstorage");

            return false;

        }else{

            var storage=window.localStorage;

            //寫入a字段

            storage["a"]=1;

            //寫入b字段

            storage.a=1;

            //寫入c字段

            storage.setItem("c",3);

            console.log(typeof storage["a"]);

            console.log(typeof storage["b"]);

            console.log(typeof storage["c"]);

        }

if(！window.localStorage){

            alert("瀏覽器支持localstorage");

            return false;

        }else{

            var storage=window.localStorage;

            //寫入a字段

            storage["a"]=1;

            //寫入b字段

            storage.a=1;

            //寫入c字段

            storage.setItem("c",3);

            console.log(typeof storage["a"]);

            console.log(typeof storage["b"]);

            console.log(typeof storage["c"]);

        }

localStorage只支持string類型的存儲。

localStorage的讀取

        if(!window.localStorage){

            alert("瀏覽器支持localstorage");

        }else{

            var storage=window.localStorage;

            //寫入a字段

            storage["a"]=1;

            //寫入b字段

            storage.a=1;

            //寫入c字段

            storage.setItem("c",3);

            console.log(typeof storage["a"]);

            console.log(typeof storage["b"]);

            console.log(typeof storage["c"]);

            //第一種方法讀取

            var a=storage.a;

            console.log(a);

            //第二種方法讀取

            var b=storage["b"];

            console.log(b);

            //第三種方法讀取

            var c=storage.getItem("c");

            console.log(c);

        }

localStorage的刪、改

        if(!window.localStorage){

            alert("瀏覽器支持localstorage");

        }else{

            var storage=window.localStorage;

            //寫入a字段

            storage["a"]=1;

            //寫入b字段

            storage.b=1;

            //寫入c字段

            storage.setItem("c",3);

            console.log(storage.a);

            // console.log(typeof storage["a"]);

            // console.log(typeof storage["b"]);

            // console.log(typeof storage["c"]);

            /*分割線*/

            storage.a=4;

            console.log(storage.a);

        }

localStorage的刪除

一、將localStorage的全部內容清除

var storage=window.localStorage;

            storage.a=1;

            storage.setItem("c",3);

            console.log(storage);

            storage.clear();

 

            console.log(storage);

二、 將localStorage中的某個鍵值對刪除

var storage=window.localStorage;

            storage.a=1;

            storage.setItem("c",3);

            console.log(storage);

            storage.removeItem("a");

            console.log(storage.a);

localStorage的鍵獲取

var storage=window.localStorage;

            storage.a=1;

            storage.setItem("c",3);

            for(var i=0;i<storage.length;i++){

                var key=storage.key(i);

                console.log(key);

            }

4、localStorage其餘注意事項

通常咱們會將JSON存入localStorage中，可是在localStorage會自動將localStorage轉換成爲字符串形式

 

這個時候咱們可使用JSON.stringify()這個方法，來將JSON轉換成爲JSON字符串

if(!window.localStorage){

            alert("瀏覽器支持localstorage");

        }else{

            var storage=window.localStorage;

            var data={

                name:'xiecanyong',

                sex:'man',

                hobby:'program'

            };

            var d=JSON.stringify(data);

            storage.setItem("data",d);

            console.log(storage.data);

        }

讀取以後要將JSON字符串轉換成爲JSON對象，使用JSON.parse()方法  

var storage=window.localStorage;

            var data={

                name:'xiecanyong',

                sex:'man',

                hobby:'program'

            };

            var d=JSON.stringify(data);

            storage.setItem("data",d);

            //將JSON字符串轉換成爲JSON對象輸出

            var json=storage.getItem("data");

            var jsonObj=JSON.parse(json);

            console.log(typeof jsonObj);