1. cookie

1.1 cookie是什么

cookie是當(dāng)我們?yōu)g覽某網(wǎng)站的時(shí)候，由web服務(wù)器存儲(chǔ)在我們機(jī)器硬盤上的一個(gè)小的文本文件箭养。其中記錄了我們的用戶名慕嚷、密碼、瀏覽的網(wǎng)頁毕泌、停留的時(shí)間等等信息喝检。如果我們?cè)俅蝸淼竭@個(gè)網(wǎng)站時(shí)，web服務(wù)器會(huì)先看看有沒有它上次留下來的cookie撼泛，如果有挠说，會(huì)讀取cookie中的內(nèi)容，來判斷使用者愿题，比如可以讓我們不用輸入ID损俭、密碼就直接登錄等。

當(dāng)客戶端要發(fā)送http請(qǐng)求時(shí)潘酗，瀏覽器會(huì)先檢查下是否有對(duì)應(yīng)的cookie杆兵，如果有，則自動(dòng)地添加在request header中的cookie字段仔夺。注意琐脏，每一次的http請(qǐng)求，如果有cookie缸兔，瀏覽器都會(huì)自動(dòng)帶上cookie發(fā)送給服務(wù)端日裙。

1.2 cookie的屬性

（1）Expires\Max Age

設(shè)置cookie在什么時(shí)間內(nèi)有效。Expires就是失效日期惰蜜，它必須是GMT格式的時(shí)間（可以通過 new Date().toGMTString() 或者 new Date().toUTCString() 來獲得）昂拂。對(duì)于失效的cookie瀏覽器會(huì)清空汗销。如果沒有設(shè)置該選項(xiàng)帘撰，這樣的cookie就稱為會(huì)話cookie。它存在于內(nèi)存中潮秘，當(dāng)會(huì)話結(jié)束樟结，也就是瀏覽器關(guān)閉時(shí)养交，cookie消失。

補(bǔ)充：Expires 是 http/1.0 協(xié)議中的選項(xiàng)瓢宦，在 http/1.1 協(xié)議中 Expires 已經(jīng)由 Max Age 選項(xiàng)代替碎连。Expires的值是一個(gè)時(shí)間點(diǎn)（cookie失效時(shí)刻= Expires），而Max age的值是一個(gè)以秒為單位時(shí)間段（cookie失效時(shí)刻= 創(chuàng)建時(shí)刻+ Max age）驮履。

（2）Domain鱼辙、Path

Domain 是域名廉嚼，Path 是路徑，兩者加起來就構(gòu)成了 URL 倒戏，Domain 和 Path 一起來限制 cookie 能被哪些 URL 訪問怠噪。即請(qǐng)求的URL是 Domain 或其子域、且 URL 的路徑是 Path 或子路徑杜跷，則都可以訪問該 cookie傍念。

補(bǔ)充：發(fā)生跨域 xhr 請(qǐng)求時(shí)，即使請(qǐng)求 URL 的域名和路徑都滿足 cookie 的 Domain 和 Path 葛闷，默認(rèn)情況下 cookie 也不會(huì)自動(dòng)被添加到請(qǐng)求頭部中憋槐。

（3）Size

cookie 的大小

（4）Secure

設(shè)置 cookie 只在確保安全的請(qǐng)求中才會(huì)發(fā)送。當(dāng)請(qǐng)求是 HTTPS 或者其他安全協(xié)議時(shí)淑趾，包含Secure 選項(xiàng)的 cookie 才能被發(fā)送至服務(wù)器阳仔。

補(bǔ)充：如果想在客戶端即網(wǎng)頁中通過 js 去設(shè)置Secure類型的 cookie，必須保證網(wǎng)頁是https協(xié)議的扣泊。在http協(xié)議的網(wǎng)頁中是無法設(shè)置secure類型cookie的近范。

（5）httponly

這個(gè)選項(xiàng)用來設(shè)置cookie是否能通過 js 去訪問。默認(rèn)情況下延蟹，cookie不會(huì)帶httpOnly選項(xiàng)(即為空)顺又，所以默認(rèn)情況下，客戶端是可以通過js代碼去訪問（包括讀取等孵、修改稚照、刪除等）這個(gè)cookie的。當(dāng)cookie帶httpOnly選項(xiàng)時(shí)俯萌，客戶端則無法通過js代碼去訪問（包括讀取果录、修改、刪除等）這個(gè)cookie咐熙。

補(bǔ)充：只要是httponly類型的,在控制臺(tái)通過document.cookie是獲取不到的弱恒，也不能進(jìn)行修改。

1.3 cookie 的設(shè)置棋恼、讀取返弹、刪除方法

（1）服務(wù)端設(shè)置 cookie ：客戶端第一次向服務(wù)端請(qǐng)求時(shí)，在相應(yīng)的請(qǐng)求頭中就有 set-cookie 字段爪飘，用來標(biāo)識(shí)哪個(gè)用戶义起。服務(wù)端可以設(shè)置 cookie 的所有選項(xiàng)。

（2）客戶端設(shè)置 cookie ：沒有特定的方法师崎，需要自己封裝默终。document.cookie可以獲得所有 cookie ，也可以通過 document.cookie="name=Dobby"簡(jiǎn)單設(shè)置，一次只能設(shè)置一個(gè)齐蔽。

簡(jiǎn)單設(shè)置cookie：

function setCookie ( name, value, iDay ) {

? ? ?let oDate = new Date();

? ??oDate.setDate ( oDate.getDate() + iDay );

? ??document.cookie = name + "=" + value + ";expires=" + oDate;

}?

讀取cookie：

funcion getCookie ( name ){

? ? let arr = document.cookie.spile ( ';' );

? ? for( let i = 0; i < arr.length; i ++ ){

? ? ? ? let arr2 = arr[i].split( '=' );

? ? ? ? if( arr2[0] == name ){

? ? ? ? ? ? return arr2[1];

? ? ? ? }

? ? ? ? return ' ';

}

刪除cookie：

function removeCookie( name ){

? ? setCookie( name, '1', -1 );//第二個(gè)value值隨便設(shè)個(gè)值两疚，第三個(gè)值設(shè)為-1表示： 昨天就過期了，刪除含滴。

}

1.4 cookie 和 session 的區(qū)別

cookie 是存在客戶端瀏覽器上诱渤，session 會(huì)話存在服務(wù)器上。會(huì)話對(duì)象用來存儲(chǔ)特定用戶會(huì)話所需的屬性及配置信息谈况。當(dāng)用戶請(qǐng)求來自應(yīng)用程序的 web 頁時(shí)源哩，如果該用戶還沒有會(huì)話，則服務(wù)器將自動(dòng)創(chuàng)建一個(gè)會(huì)話對(duì)象鸦做。當(dāng)會(huì)話過期或者被放棄后，服務(wù)器將終止該會(huì)話谓着。

當(dāng) cookie 失效泼诱、session 過期時(shí)，就需要重新登錄了赊锚。

2. 瀏覽器本地存儲(chǔ)

2.1 localStorage治筒、sessionStorage

sessionStorage 用于本地存儲(chǔ)一個(gè)會(huì)話中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁面才能訪問舷蒲，并且當(dāng)會(huì)話結(jié)束后耸袜，數(shù)據(jù)也隨之銷毀。所以 sessionStorage 僅僅是會(huì)話級(jí)別的存儲(chǔ)牲平，而不是一種持久化的本地存儲(chǔ)堤框。

localStorage 是持久化的本地存儲(chǔ)，除非是通過js刪除纵柿，或者清除瀏覽器緩存蜈抓，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的。

2.2 webstorage 與 cookie 的區(qū)別

(1) web storages 和 cookie 的作用不同昂儒，web storage 是用于本地大容量存儲(chǔ)數(shù)據(jù)( web storage 的存儲(chǔ)量大到 5MB);而 cookie 是用于客戶端和服務(wù)端間的信息傳遞沟使；

(2) web storage 有 setItem、getItem渊跋、removeItem腊嗡、clear 等方法，cookie 需要我們自己來封裝setCookie拾酝、getCookie燕少、removeCookie。