你可能需要好好認識一下這個LocalStorage（本地存儲）

我們在瞭解LocalStorage之前，不妨先了解一下Web的存儲機制：

Web Storage 最早是在Web超文本應用技術工作組（WHAT_WG）的Web應用1.0規範中描述的。這個規範最初的工作最終成爲了HTML5 的一部分。Web Storage 的目的是爲了克服有 cookie 帶來的一些限制，Cookie存儲的數據量非常小，而且當數據需要被嚴格控制在客戶端上時，無須持續地將數據發送回服務器，所以可能會造成帶寬的浪費。

Web Storage 提供了兩個存儲對象：localStorage 和 sessionStorage。

• sessionStorage 對象存儲特定於某個會話的數據，也就是該數據只會保持到瀏覽器關閉，會話結束後會自動失效。存儲在 sessionStorage 中的數據可以跨越頁面刷新而存在，同時如果瀏覽器支持，瀏覽器崩潰並重啓之後依然可用（Firefox和WebKit都支持，IE不支持）。
• localStorage 對象可以永久存儲，而且同源下數據多窗口也能共享。But！localStorage也是有限制的，大多數桌面瀏覽器都會設置每個來源5MB的限制（Chrome和Safar對每個來源的限制是2.5MB）。雖然對每個來源的大小進行限制，但是要知道，Cookie只有4K 的大小，所以這些限制是不足以成爲大家使用 localStorage 的障礙的。

好了！關於Web的存儲機制就先介紹到這裏，如果大家對這方面感興趣，可以評論區留言，我會另開一個專題進行講解Web的存儲機制。

---

一、什麼是 localStorage ：

上面的內容大家也都看到了，應該對 localStorage 也已經有了一個初步的印象了。什麼？？在總結一遍？？那麼接着往下看吧。

在HTML5中，新加入了一個localStorage特性，這個特性主要是用來作爲本地存儲來使用的，解決了cookie存儲空間不足的問題(cookie中每條cookie的存儲空間爲4k)，localStorage中一般瀏覽器支持的是5M大小，這個在不同的瀏覽器中localStorage會有所不同。它通常只能存儲String類型的數據，所以最好在每次存儲時把數據轉換成JSON格式，取出的時候再轉換回來。

二、localStorage 的使用：

在使用之前需要注意兩點：

首先在 setItem 存儲數據時，可能會達到大小限制，或者是JSON.parse 解析的字符串不符合json規則也很有可能報錯，所以在使用的時候最好加上錯誤捕獲：

// try catch 結構：
    try{
        // 我們把有可能報錯的內容放入try之中執行;
        // 報錯了不會影響代碼的繼續執行;
        // 會把錯誤信息放到 catch 裏面的參數 e 之中;可以通過 e 進行錯誤排查;

    }catch( e ){

    }

另外在存儲容量快滿時，會造成getItem性能的急劇下降。

現在正式介紹一下 localStorage 的使用方法：

• localStorage.setItem(“key”,“value”)：存儲名字爲key的一個值value，如果key存在，就更新value；

//存儲數據 : 
    // 使用方法存儲數據
    localStorage.setItem("test" , "hello world1"); // 設置test爲 hello world1
    localStorage.setItem("test" , "hello world2"); // 覆蓋之前的值，現在test爲 hello world1
    // 使用屬性存儲數據
    localStorage.test3 = "hello word3";

• localStorage.getItem(“key”)：獲取名稱爲key的值，如果key不存在則返回null

// 獲取數據 
    // 使用方法讀取數據
    var res = localStorage.getItem("test");
    console.log(res);
    // 使用屬性讀取數據
    var test3 = localStorage.test3;
    console.log(test3 );

• localStorage.removeItem(“key”)：刪除名稱爲“key”的信息，這個key所對應的value也會全部被刪除

// 刪除數據;
    localStorage.removeItem("test");

• localStorage.clear()：清空localStorage中所有信息

// 清空數據;
    localStorage.clear();

• key()：向其中輸入索引即可獲取對應的鍵值

    var storage=window.localStorage;
    storage.setItem("test1" , "hello world1");
    storage.setItem("test2" , "hello world2");
    // 遍歷數據，取出每一條數據的key值
    for(var i=0;i<storage.length;i++){
        var key=storage.key(i);
        console.log(key);
    }

三、與 JSON 的配合使用：

對於前端來說存儲複雜數據最方便的結構是什麼呢？
當然是 數組 + 對象

那麼，我們考慮是否可以將對象、數組內容放入到 localstorage 之中進行存儲呢 ?

我們要知道：
localstorage：只允許存儲字符串；

JSON 是字符串結構；標準的json對象{“name” : “jack”}

JSON.stringify(); 將json格式的數據（JavaScript 對象）轉換成JSON格式的字符串

    var  data = {name:"jack"};
    data = JSON.stringify(data);
    localStorage.setItem("data1",data);

JSON.parse(); 將JSON格式的字符串轉換成JSON對象進行處理

    var str = localStorage.getItem("data1");
    var obj = JSON.parse(str);
    console.log(obj);

四、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 瀏覽器兼容情況：

---

喜歡的朋友可以點點關注，點點贊，歡迎評論區留言互動。