Cookie

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

localStorage

localStorage是Html5的一個(gè)新特性，主要是用來(lái)作為本地存儲(chǔ)來(lái)使用的，解決了cookie存儲(chǔ)控件不足的缺點(diǎn)，localStorage中一般瀏覽器的支持是5M大小，在不同瀏覽器中會(huì)有所不同。local是“本地”的意思，即本地存儲(chǔ)，localStorage會(huì)將數(shù)據(jù)保存在本地，關(guān)閉頁(yè)面后數(shù)據(jù)依然會(huì)保存。

sessionStorage

sessionStorage與localStorage相似，都是用來(lái)存儲(chǔ)數(shù)據(jù)的，但保存數(shù)據(jù)的生命周期與localStorage不同，正如其名，session是“會(huì)話(huà)”的意思，即會(huì)話(huà)存儲(chǔ)，sessionStorage只是將一部分?jǐn)?shù)據(jù)在當(dāng)前對(duì)話(huà)中保存下來(lái)，刷新頁(yè)面數(shù)據(jù)依然存在，但當(dāng)關(guān)閉頁(yè)面后數(shù)據(jù)會(huì)消失。

對(duì)瀏覽器來(lái)講使用 Web Storage 存儲(chǔ)鍵值對(duì)比存儲(chǔ) Cookie 方式更直觀(guān)，而且容量更大，它包含兩種：localStorage 和 sessionStorag

• sessionStorage（臨時(shí)存儲(chǔ)）：為每一個(gè)數(shù)據(jù)源維持一個(gè)存儲(chǔ)區(qū)域，在瀏覽器打開(kāi)期間存在，包括頁(yè)面重新加載
• localStorage（長(zhǎng)期存儲(chǔ)）：與 sessionStorage 一樣，但是瀏覽器關(guān)閉后，數(shù)據(jù)依然會(huì)一直存在

區(qū)別

1.生命周期

Cookie：可以自己設(shè)置失效時(shí)間，如果沒(méi)有設(shè)置，當(dāng)頁(yè)面關(guān)閉后失效
localStorage：本地存儲(chǔ)只能通過(guò)手動(dòng)清除，否則會(huì)一直保存
sessionStorage：會(huì)話(huà)存儲(chǔ)當(dāng)瀏覽器關(guān)閉后失效

2.存儲(chǔ)大小

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

3.與服務(wù)器通信

Cookie：每次都會(huì)攜帶在HTTP頭中，如果使用Cookie保存過(guò)多數(shù)據(jù)會(huì)影響性能，Cookie會(huì)在瀏覽器和服務(wù)器來(lái)回傳遞
sessionStorage和localStorage：不會(huì)自動(dòng)把數(shù)據(jù)發(fā)送給服務(wù)器，僅在客戶(hù)端中保存，不參與服務(wù)器通信。

4.易用性

Cookie：api需要自行進(jìn)行封裝，比較復(fù)雜
sessionStorage和localStorage：api簡(jiǎn)單易用

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

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

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

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

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

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