共同點：用於資料的儲存。
區別：
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));
}
}
總結：如果有哪裡寫錯了，歡迎各位大佬評論區留言指正