Cookie

http協(xié)議本身是無狀態(tài)的，對于瀏覽器的每一次請求，服務(wù)器都會(huì)獨(dú)立處理，請求之間沒有關(guān)聯(lián)，為了讓服務(wù)器識(shí)別出對應(yīng)的瀏覽器，對應(yīng)的用戶，需要服務(wù)器和瀏覽器共同維持一個(gè)狀態(tài)，這就是會(huì)話機(jī)制（瀏覽器和服務(wù)器在多次請求間共享數(shù)據(jù)的過程稱為會(huì)話跟蹤技術(shù)）。（認(rèn)為一段時(shí)間內(nèi)，使用同一個(gè)瀏覽器的是一個(gè)用戶）。存儲(chǔ)形式是鍵值對，存儲(chǔ)于訪問者的計(jì)算機(jī)中的一小塊數(shù)據(jù)，一般是4KB。可以由Javascript進(jìn)行操作。
每一個(gè) HTTP 請求都會(huì)在請求頭中攜帶 cookie 到服務(wù)端
每一個(gè) HTTP 響應(yīng)都會(huì)在響應(yīng)頭中攜帶 cookie 到客戶端
也就是說，cookie 是不需要我們手動(dòng)設(shè)置，就會(huì)自動(dòng)在 客戶端 和 服務(wù)端之間游走的數(shù)據(jù)
與Cookie相關(guān)的http頭：

1. Set-Cookie，由服務(wù)器發(fā)送，放在響應(yīng)頭中，用于在客戶端創(chuàng)建一個(gè)Cookie
2. Cookie，由客戶端發(fā)送，放在請求頭中，只有cookie的domain和path與請求url匹配才會(huì)發(fā)送

特點(diǎn)

1. 有時(shí)效性，一般是瀏覽器關(guān)閉就過期（不設(shè)置過期時(shí)間，cookie會(huì)保存在內(nèi)存中，生命周期隨著瀏覽器的關(guān)閉結(jié)束，這種稱為會(huì)話cookie；設(shè)置了過期時(shí)間，cookie保存在硬盤中，關(guān)閉瀏覽器后，若不到過期時(shí)間，就仍然存在）
2. 有大小限制，一般是4KB
3. 有數(shù)量限制，一般是50條左右
4. 有域名限制，同源策略，哪個(gè)域名下的cookie，只能在哪個(gè)域名下訪問
5. 每次請求都要攜帶，浪費(fèi)帶寬

應(yīng)用場景

1. 管理登陸狀態(tài)（關(guān)閉瀏覽器重新打開仍然可以直接登陸，保存上次登錄的時(shí)間，保存上次查看的頁面，瀏覽計(jì)數(shù)）
2. 個(gè)性化設(shè)置
3. 瀏覽器行為跟蹤，分析用戶行為，廣告推送

缺點(diǎn)

1. 可能被禁用 被刪除
2. 存儲(chǔ)空間很小
3. 安全性不高

前后端如何交互cookie

當(dāng)一個(gè)請求發(fā)起時(shí)，會(huì)先去看cookie空間中是否有內(nèi)容，有的話，請求會(huì)自動(dòng)攜帶cookie空間中的內(nèi)容到后臺(tái)。后臺(tái)response時(shí)，如果之前的request有cookie，也會(huì)攜帶回來。后臺(tái)也可以主動(dòng)設(shè)置cookie

設(shè)置cookie

若cookie設(shè)置了httpOnly，則javascript不能操作。

1. 讀取

function getCookie(key) {
  const cookieAttr =     document.cookie.split(';');
  cookieArr.forEach(item => {
    if(item.split('=')[0] === key) {
     return item.split('=')[1]
    }
  }
}

1. 添加

document.cookie = 'a=100;expires=Thu, 18 Dec 2043 12:00:00 GMT';
// 設(shè)置一個(gè)cookie，它將在2043年12月18日12點(diǎn)以后過期，過期后自動(dòng)刪除

3. 刪除
   將某一個(gè)cookie的過期時(shí)間設(shè)置成當(dāng)前之間之前

Session

上面已經(jīng)提到cookie是保存在瀏覽器端，而session是保存在服務(wù)器端。
session對象服務(wù)端會(huì)在用戶訪問網(wǎng)站之后主動(dòng)創(chuàng)建（若客戶端請求攜帶sessionId，則不需要重新創(chuàng)建），并且把sessionId返回給客戶端。
sessionId一般是放在cookie中返回，但如果客戶端禁用了cookie，那就重寫URL將sessionId拼接到訪問地址后。

應(yīng)用場景

個(gè)人認(rèn)為，大部分情況是用于保存比cookie更加隱私的用戶信息

1. 購物車
2. 登陸信息

特點(diǎn)

1. 大小不受限制
2. 安全性更高，如果cookie沒有禁用，那么攻擊session就要先攻擊cookie；session一旦結(jié)束，攻擊了cookie也沒用了；session重新啟動(dòng)，生成新的id，之前的sessionID也沒用了；sessionID是加密的;
   session數(shù)據(jù)包不可偽造，cookie可偽造
3. 如果是高并發(fā)，會(huì)增加服務(wù)器的壓力

WebStorage

sessionStorage和localStorage是HTML5新增的兩種本地存儲(chǔ)機(jī)制，主要目的是克服cookie的一些限制，當(dāng)數(shù)據(jù)需要嚴(yán)格存儲(chǔ)在客戶端時(shí)（比如上次登錄時(shí)間，訪問過的頁面），不需要持續(xù)的將數(shù)據(jù)發(fā)送給服務(wù)器。存儲(chǔ)數(shù)據(jù)大小一般都是5MB。只能存儲(chǔ)字符串類型。
WebStorage提供了方便的數(shù)據(jù)操作API setItem(key, value) getItem(key) removeItem(key) clear() key(index)

localStorage

localStoarge的生命周期是永久的，關(guān)閉頁面或?yàn)g覽器數(shù)據(jù)也不會(huì)消失，除非主動(dòng)刪除數(shù)據(jù)。

sessionStorage

sessionStorage的生命周期是僅在當(dāng)前會(huì)話下有效。
sessionStorage引入了一個(gè)“瀏覽器窗口”的概念，sessionStorage是在同源的窗口中始終存在的數(shù)據(jù)。只要這個(gè)瀏覽器窗口沒有關(guān)閉，即使刷新頁面或者進(jìn)入同源另一個(gè)頁面，數(shù)據(jù)依然存在。但是sessionStorage在關(guān)閉了瀏覽器窗口后就會(huì)被銷毀。同時(shí)獨(dú)立的打開同一個(gè)窗口同一個(gè)頁面，sessionStorage也是不一樣的。