瞭解localStorage優勢等

localStorage

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

localStorage的優勢
1、localStorage拓展了cookie的4K限制
2、localStorage會可以將第一次請求的數據直接存儲到本地，這個相當於一個5M大小的針對於前端頁面的數據庫，相比於cookie可以節約帶寬，但是這個卻是隻有在高版本的瀏覽器中才支持的
localStorage的侷限
1、瀏覽器的大小不統一，並且在IE8以上的IE版本才支持localStorage這個屬性
2、目前所有的瀏覽器中都會把localStorage的值類型限定爲string類型，這個在對我們日常比較常見的JSON對象類型需要一些轉換
localStorage的寫入，localStorage的寫入有三種方法。 localStorage只支持string類型的存儲

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

三種對localStorage的讀取，其中官方推薦的是getItem\setItem這兩種方法對其進行存取

            //第一種方法讀取
            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;
//寫入a字段
storage["a"]=1;
storage.a=4; //修改
console.log(storage.a)

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

storage.setItem("c",3);
console.log(storage);
storage.removeItem("a");

將localStorage的所有內容清除

storage.clear();

localStorage其他注意事項
一般我們會將JSON(js中的對象)存入localStorage中，但是在localStorage會自動將localStorage轉換成爲字符串形式
這個時候我們可以使用JSON.stringify()這個方法，來將JSON轉換成爲JSON字符串

   var data={
                name:'zhangsan',
                sex:'man',
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            //將JSON字符串轉換成爲JSON對象輸出
            var json=storage.getItem("data");
            var jsonObj=JSON.parse(json);

往localStorage中存入數組

let newlist = []
localStorage.setItem('recent', JSON.stringify(newlist))
let list = JSON.parse(localStorage.getItem('recent'))

新人初來，有很多欠缺需要大家多多指教，逆疫而戰大家加油