在 Html5 中新加入的 localStorage 特性，主要是用來(lái)作為本地存儲(chǔ)使用的，解決了 cookie 存儲(chǔ)空間不足的問(wèn)題。
cookie 中每條 cookie 的存儲(chǔ)空間為 4K， localStorage 中一般瀏覽器支持的是 5M大小，在不同瀏覽器中 localStorage 會(huì)有所不同。

優(yōu)點(diǎn)：拓展了 cookie 的 4k 限制， 可以將第一次請(qǐng)求的數(shù)據(jù)直接存儲(chǔ)到本地，但只有在高版本的瀏覽器中才支持。

localStorage 與 sessionStorage 的唯一區(qū)別就是 localStorage 屬于永久性存儲(chǔ)，而sessionStorage 屬于當(dāng)會(huì)話結(jié)束的時(shí)候，sessionStorage 中的鍵值對(duì)就會(huì)被清空。

1、使用前先判斷瀏覽器是否支持 localStorage 這個(gè)屬性

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

2、localStorage 寫入的三種方法(localStorage 只支持 string 類型的存儲(chǔ))

var storage=window.localStorage;
     // 1、寫入a字段
     storage[“a”] = 1;
     // 2
     storage.a = 1;
     // 3
     storage.setItem(“a”, 3);

3、localStorage 讀取的三種方法

// 1
     var a = storage.a;
     // 2
     var a = storage[“a”];
     // 3
     var a = storage.getItem(“a”);

官方推薦 getItem／setItem 這兩種方法進(jìn)行存取

4、localStorage 更改

storage[“a”] = 1;
storage.a=4;

a 的值就直接被改變了

5、localStorage 刪除

// 全部清除
     storage.clear();
     // 某個(gè)鍵值對(duì)刪除
     storage.removeItem(“a”);

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

7、注意事項(xiàng)
當(dāng)我們將 json 存入到 localStorage 中時(shí)，localStorage 會(huì)自動(dòng)將 localStorage 轉(zhuǎn)換為字符串形式，我們需要用 JSON.stringify() 方法，將 JSON 轉(zhuǎn)換為 JSON 字符串

讀取之后要將 Json 字符串轉(zhuǎn)換為 json 對(duì)象， 使用 JSON.parse() 方法