了解cookie和storage的區別及優缺點

共同點：用於數據的存儲。

區別：

1、是否需要添加到http請求頭？

HTTP Cookie（cookie）：在客戶端存儲會話信息，要求服務器對任意HTTP請求發送set-cookie HTTP頭作為響應的一部分，包含會話信息。例如set-cookie: name=value。然后瀏覽器會存儲這樣的會話信息，並在這之后，通過為每個請求添加cookie HTTP頭將信息發送回服務器。如cookie:name=value。

Web Storage：無須將數據發回服務器，僅在本地保存。

2.存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數

據，sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。如果在發送請求時需要攜帶大量的報文，建議使用storage更好一點

3.數據有效期不同，sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。

4.作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知機制，可以將數據更新的通知發送給監聽者。

5.路徑：Cookie有路徑的限制（比如cookie可以寫在某個域名下面或者某個路徑下面，我們只讓/AAA.com生效，而/bbb.com則就會看不到），Storage只存儲的域名下（比如你寫在www.baidu.com下面，在這個域名下，不管是什么路徑都有這個Storage）

 

與Cookie相比，Web Storage存在不少的優勢，概括為以下幾點：

1. 存儲空間更大：IE8下每個獨立的存儲空間為10M，其他瀏覽器實現略有不同，但都比Cookie(<=4kb)要大很多。

2. 存儲內容不會發送到服務器：當設置了Cookie后，Cookie的內容會隨着請求一並發送到服務器，這對於本地存儲的數據是一種帶寬浪費。而Web Storage中的數據則僅僅是存在本地，不會與服務器發生任何交互。

3. 更多豐富易用的接口：Web Storage提供了一套更為豐富的接口，使得數據操作更為簡便。您可以告訴瀏覽器 cookie 屬於什么路徑。默認情況下，cookie 屬於當前頁。

localStorage.setItem("name", "張三")，sessionStorage.setItem("age", 18);可進行（key，value）的賦值操作

 

cookie的缺點主要集中於安全性和隱私保護

1.cookie可能被禁用。當用戶非常注重隱私保護的時候，他會禁用cookie緩存

2.cookie可能會被刪除，每個cookie都是硬盤上的一個文件，因此很容易被用戶刪除

3.cookie安全性不夠高，cookie都是以純文本形式記錄在文件中，如果要保存用戶名密碼等信息的時候，最好事先經過加密處理

在此，為什么封裝Storage？

• Storage本身有API,但是只是簡單的key/value形式
• Storage只能存儲字符串，需要人工轉為json對象
• Storage只能一次性清空，不能單個清空（api下）

下面還是看代碼吧

/**
 * Storage封裝
 */
const  STORAGE_KEY = 'mall'; //設置一個獨一無二的key
export default{
  // 存儲值
  setItem(key,value,module_name){
    if (module_name){
      let val = this.getItem(module_name);
      val[key] = value;
      this.setItem(module_name, val);
    }else{
      let val = this.getStorage();
      val[key] = value;
      window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val));
    }
  },
  // 獲取某一個模塊下面的屬性user下面的userName
  getItem(key,module_name){
    if (module_name){
      let val = this.getItem(module_name);
      if(val) return val[key];
    }
    return this.getStorage()[key];
  },
  getStorage(){
    return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}');
  },
  clear(key, module_name){
    let val = this.getStorage();
    if (module_name){
      if (!val[module_name])return;
      delete val[module_name][key];
    }else{
      delete val[key];
    }
    window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val));
  }
}

總結：如果有哪里寫錯了，歡迎各位大佬評論區留言指正

參考資料：http://javascript.ruanyifeng.com/bom/webstorage.html

　　　　　https://www.jianshu.com/p/c352d4af4ed3