HTML5中localStorage的使用

為什么要存在localStorage

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

localStorage的優勢與局限

localStorage的優勢

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

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

localStorage的局限

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

2、目前所有的瀏覽器中都會把localStorage的值類型限定為string類型，這個在對我們日常比較常見的JSON對象類型需要一些轉換

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

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

5、localStorage不能被爬蟲抓取到

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

所以，開發時，當用了某些前端框架（如x-admin）的時候發現死活清不掉的情況下，重啟就沒有清掉的情況下，可能就是用了localstorage。

localStorage的使用

判斷瀏覽器是否支持localStorage這個屬性

        if(！window.localStorage){
            alert("瀏覽器不支持localstorage");
            return false;
        }else{
            //主邏輯業務
        }

寫入localStorage

localStorage的使用也是遵循同源策略的，所以不同的網站直接是不能共用相同的localStorage

寫入相同key的鍵值對，會自動覆蓋。

            var storage=window.localStorage;
            //寫入a字段
            storage["a"]=1;
            //寫入b字段
            storage.b=2;
            //寫入c字段
            storage.setItem("c",3);

讀取localStorage

            //第一種方法讀取
            var a=storage.a;
            console.log(a);
            //第二種方法讀取
            var b=storage["b"];
            console.log(b);
            //第三種方法讀取
            var c=storage.getItem("c");
            console.log(c);

刪除localStorage

var storage=window.localStorage;
//根據主鍵刪除
storage.removeItem("a");
//直接清空
storage.clear();

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);
            }

localStorage存取json

        if(!window.localStorage){
            alert("瀏覽器不支持localstorage");
        }else{
            var storage=window.localStorage;
            var data={
                name:'xiecanyong',
                sex:'man',
                hobby:'program'
            };
            /*使用JSON.stringify()這個方法，來將JSON對象轉換成為JSON字符串*/
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            console.log(storage.data);
            
            
            /*使用JSON.parse()方法將JSON字符串轉換成為JSON對象輸出*/
            var json=storage.getItem("data");
            var jsonObj=JSON.parse(json);
            console.log(typeof jsonObj);
        }

 

參考

https://www.cnblogs.com/st-leslie/p/5617130.html