Cookie

在Html5之前Cookie用于客戶端和服務器端的通信，具有本地存儲功能，Cookie的存儲非常小，只有4k大小，主要用于保存登錄信息，Cookie的內容主要包括：名字、值、過期時間、路徑和域。

localStorage

localStorage是Html5的一個新特性，主要是用來作為本地存儲來使用的，解決了cookie存儲控件不足的缺點，localStorage中一般瀏覽器的支持是5M大小，在不同瀏覽器中會有所不同。local是“本地”的意思，即本地存儲，localStorage會將數據保存在本地，關閉頁面后數據依然會保存。

sessionStorage

sessionStorage與localStorage相似，都是用來存儲數據的，但保存數據的生命周期與localStorage不同，正如其名，session是“會話”的意思，即會話存儲，sessionStorage只是將一部分數據在當前對話中保存下來，刷新頁面數據依然存在，但當關閉頁面后數據會消失。

對瀏覽器來講使用 Web Storage 存儲鍵值對比存儲 Cookie 方式更直觀，而且容量更大，它包含兩種：localStorage 和 sessionStorag

• sessionStorage（臨時存儲）：為每一個數據源維持一個存儲區域，在瀏覽器打開期間存在，包括頁面重新加載
• localStorage（長期存儲）：與 sessionStorage 一樣，但是瀏覽器關閉后，數據依然會一直存在

區別

1.生命周期

Cookie：可以自己設置失效時間，如果沒有設置，當頁面關閉后失效
localStorage：本地存儲只能通過手動清除，否則會一直保存
sessionStorage：會話存儲當瀏覽器關閉后失效

2.存儲大小

Cookie：Cookie的存儲大小只有4k
sessionStorage和localStorage：一般存儲大小都有5M

3.與服務器通信

Cookie：每次都會攜帶在HTTP頭中，如果使用Cookie保存過多數據會影響性能，Cookie會在瀏覽器和服務器來回傳遞
sessionStorage和localStorage：不會自動把數據發送給服務器，僅在客戶端中保存，不參與服務器通信。

4.易用性

Cookie：api需要自行進行封裝，比較復雜
sessionStorage和localStorage：api簡單易用

localStorage和sessionStorage用法
sessionStorage 和 localStorage 的用法基本一致，localStorage和sessionStorage都具有相同的操作方法，例如setItem()、getItem()和removeItem()等，引用類型的值要轉換成JSON
valueOf() /獲取全部數據
let dataAll = sessionStorage.valueOf()
let dataAll2 = localStorage.valueOf()

setItem() 將value存儲到key字段
sessionStorage.setItem("key", "value")
localStorage.setItem("key2, "value2")

getItem() 獲取指定key本地存儲的值
var value = sessionStorage.getItem("key");
var value2 = localStorage.getItem("site");

removeItem() 刪除指定key本地存儲的值
sessionStorage.removeItem("key");
localStorage.removeItem("key");

clear() 清除所有的key和value
sessionStorage.clear();
localStorage.clear();

		var name = 'sessionData';
        var num = 9988;
        sessionStorage.setItem(name, num);//存儲數據
        sessionStorage.setItem('value2', 8899);
        let dataAll = sessionStorage.valueOf();//獲取全部數據
        console.log(dataAll, '獲取全部數據');
        var dataSession = sessionStorage.getItem(name);//獲取指定鍵名數據
        var dataSession2 = sessionStorage.sessionData;//sessionStorage是js對象，也可以使用key的方式來獲取值
        console.log(dataSession, dataSession2, '獲取指定鍵名數據');
        sessionStorage.removeItem(name); //刪除指定鍵名數據
        console.log(dataAll, '獲取全部數據');
        sessionStorage.clear();//清空緩存數據：localStorage.clear();
        console.log(dataAll, '獲取全部數據');// 沒有數據了