在正式介紹cookie之前我們要先來(lái)說(shuō)一說(shuō)網(wǎng)絡(luò)通訊協(xié)議

　　首先：什么是網(wǎng)絡(luò)通訊協(xié)議?所謂協(xié)議一般就是甲乙雙方溝通要遵循的規(guī)則與方式，那么通訊協(xié)議就是通訊雙方要遵循的規(guī)則，網(wǎng)絡(luò)通訊協(xié)議則是計(jì)算機(jī)雙方傳輸數(shù)據(jù)所要遵循的協(xié)議，瀏覽網(wǎng)頁(yè)時(shí), 一般使用http或者h(yuǎn)ttps，而它們都是基于TCP/IP協(xié)議的。

　　TCP/IP協(xié)議是面向連接的

　　在發(fā)送數(shù)據(jù)之前，都必須先在雙方之間建立一條連接。在TCP/IP協(xié)議中，TCP 協(xié)議提供可靠的連接服務(wù)，連接是通過(guò)三次握手進(jìn)行初始化的，如下圖：

　　客戶(hù)端要向服務(wù)器發(fā)送請(qǐng)求，首先會(huì)發(fā)送一個(gè)請(qǐng)求連接，這是第一次握手;

　　當(dāng)服務(wù)器收到這個(gè)請(qǐng)求以后返回給客戶(hù)端一條消息，這是第二次握手;

　　然后客戶(hù)端再把確認(rèn)消息發(fā)給服務(wù)器，這是第三次握手;

　　經(jīng)過(guò)這三次握手客戶(hù)端與服務(wù)器之間的連接就建立起來(lái)了。

　　就像打電話一樣，客戶(hù)端向服務(wù)器撥通電話，服務(wù)器接起電話，說(shuō)了一句：“喂?”，然后客戶(hù)端收到了這句“喂”，再跟服務(wù)器說(shuō)一聲“喂!”，連接就建立好了，可以愉快的通話了

　　建立連接需要經(jīng)過(guò)三次握手，那數(shù)據(jù)傳輸結(jié)束以后呢?我們打電話事情說(shuō)完了要掛掉電話要經(jīng)歷一個(gè)怎樣的過(guò)程?可能對(duì)話是下面這樣的：

　　A：“我掛了”

　　B：“好”

　　A：“拜拜”

　　B：“拜拜，我也掛了”

　　A：“好，拜拜”

　　B：“嗯嗯，拜拜，掛了”

　　A：“好，拜拜”

　　B：“拜拜”

　　有點(diǎn)搞笑 ，經(jīng)過(guò)好多次消息確認(rèn)好不容易才能把電話掛掉，但這并不是無(wú)聊，而是要互相確認(rèn)對(duì)方是否真的已經(jīng)準(zhǔn)備斷開(kāi)連接了，那么我們的TCP/IP協(xié)議也會(huì)考慮到這一點(diǎn)，要斷開(kāi)連接會(huì)經(jīng)過(guò)四次揮手，如下圖：

　　數(shù)據(jù)傳輸結(jié)束時(shí)，客戶(hù)端向服務(wù)器發(fā)送一條結(jié)束的消息，服務(wù)器收到消息后會(huì)馬上返回給客戶(hù)端確認(rèn)消息，并隨后發(fā)送一條“我也結(jié)束了”的消息，當(dāng)客戶(hù)端收到這條消息以后會(huì)響應(yīng)給服務(wù)器確認(rèn)消息，服務(wù)器收到這條確認(rèn)消息以后就會(huì)關(guān)閉，而客戶(hù)端則會(huì)等待兩個(gè)單位時(shí)間之后關(guān)閉。注意這里客戶(hù)端并不是立馬關(guān)閉，而是會(huì)等帶兩個(gè)單位時(shí)間，為什么是兩個(gè)單位時(shí)間呢?首先，所謂的單位時(shí)間指的是一次前后端數(shù)據(jù)傳輸所花費(fèi)的時(shí)間，這里要等待兩個(gè)單位時(shí)間是因?yàn)榭蛻?hù)端要等數(shù)據(jù)發(fā)送到服務(wù)器以后確認(rèn)收不到數(shù)據(jù)返回，這一來(lái)一去就是兩個(gè)單位時(shí)間了，因?yàn)槿绻@個(gè)時(shí)候服務(wù)器并沒(méi)有結(jié)束的話會(huì)再次給客戶(hù)端響應(yīng)，而客戶(hù)端在兩個(gè)單位時(shí)間后收不到響應(yīng)則代表本次數(shù)據(jù)傳輸正式結(jié)束。

　　下面貼出兩張動(dòng)圖：

　　這兩張動(dòng)圖對(duì)于計(jì)算機(jī)專(zhuān)業(yè)的讀者可以嘗試探究，本文不做詳細(xì)展開(kāi)

　　http無(wú)狀態(tài)

　　HTTP協(xié)議, 使我們用戶(hù)上網(wǎng)常見(jiàn)的協(xié)議, 簡(jiǎn)單的理解, 它是基于TCP/IP協(xié)議改造加工出來(lái)的，也就是說(shuō)每一個(gè)http請(qǐng)求都會(huì)通過(guò)三次握手建立連接，傳輸數(shù)據(jù), 然后四次揮手?jǐn)嚅_(kāi)連接.

　　例如當(dāng)你登錄淘寶的時(shí)候, 你的瀏覽器跟淘寶服務(wù)器之間就行了 一個(gè) http鏈接.

　　然后, 當(dāng)首頁(yè)數(shù)據(jù)加載完成, 鏈接就斷開(kāi)了.

　　這時(shí)服務(wù)就無(wú)法保存你的狀態(tài). 你瀏覽了什么商品? 購(gòu)物車(chē)加了幾個(gè)東西? 有沒(méi)有關(guān)閉瀏覽器? 服務(wù)器統(tǒng)統(tǒng)不知道了

　　所以, 我們說(shuō)：http協(xié)議是一種無(wú)狀態(tài)協(xié)議，這里的無(wú)狀態(tài)指的是無(wú)法保存狀態(tài)，因?yàn)橐坏?shù)據(jù)傳輸結(jié)束連接就會(huì)斷開(kāi)，就無(wú)法獲取一些狀態(tài)了，這樣設(shè)計(jì)的好處就是可以節(jié)約資源，需要的時(shí)候才發(fā)出請(qǐng)求，但是也會(huì)造成一些困擾，

　　尤其是關(guān)于身份驗(yàn)證. 用戶(hù)在登錄頁(yè)面完成了登錄，那么接下來(lái)就會(huì)回到首頁(yè)或者其他頁(yè)面進(jìn)行操作，但問(wèn)題是這個(gè)時(shí)候登錄的這次http請(qǐng)求已經(jīng)結(jié)束了，所以當(dāng)完成頁(yè)面跳轉(zhuǎn)之后就取不到登錄狀態(tài)了，那怎么辦?再登錄一次?

　　當(dāng)你反復(fù)使用http協(xié)議跟服務(wù)器建立鏈接的時(shí)候, 服務(wù)器怎么才能知道, 你是一個(gè)登錄過(guò)的合法用戶(hù)?? 為了解決這個(gè)問(wèn)題, 出現(xiàn)了cookie技術(shù).

　　cookie

　　cookie稱(chēng)之為會(huì)話跟蹤技術(shù)，顧名思義，就是在一次會(huì)話中跟蹤記錄一些狀態(tài)。首先，所謂的”會(huì)話“指的就是從瀏覽器打開(kāi)一個(gè)網(wǎng)站到訪問(wèn)它的其他網(wǎng)頁(yè)直到瀏覽器關(guān)閉的這個(gè)過(guò)程。

　　cookie就可以在一次會(huì)話從開(kāi)始到結(jié)束的整個(gè)過(guò)程，全程跟蹤記錄客戶(hù)端的狀態(tài)(例如：是否登錄、購(gòu)物車(chē)信息、是否已下載、是否 已點(diǎn)贊、視頻播放進(jìn)度等等)。

　　cookie是服務(wù)器存儲(chǔ)在客戶(hù)端本地的一個(gè)文件. 它就好比服務(wù)器發(fā)給客戶(hù)端的一個(gè)身份標(biāo)識(shí), 有了這個(gè)身份牌, 只要客戶(hù)端隨身攜帶這個(gè)身份牌. 服務(wù)器就能識(shí)別我們的身份了

　　cookie的特點(diǎn)

　　1. 只能存儲(chǔ)文本

　　2. 單條存儲(chǔ)有大小限制4KB左右

　　3. 數(shù)量限制(一般瀏覽器，限制大概在50條左右)

　　4. 讀取有域名限制：不可跨域讀取，只能由來(lái)自 寫(xiě)入cookie的 同一域名 的網(wǎng)頁(yè)可進(jìn)行讀取。簡(jiǎn)單的講就是，哪個(gè)服務(wù)器發(fā)給你的cookie，只有哪個(gè)服務(wù)器有權(quán)利讀取(身份牌是我的，當(dāng)然只有我能讀取，你媳婦兒的手機(jī)自動(dòng)連接了鄰居老王家的wifi，你知道這意味著什么嗎?)

　　5. 時(shí)效限制：每個(gè)cookie都有時(shí)效，默認(rèn)的有效期是，會(huì)話級(jí)別：就是當(dāng)瀏覽器關(guān)閉，那么cookie立即銷(xiāo)毀，但是我們也可以在存儲(chǔ)的時(shí)候手動(dòng)設(shè)置cookie的過(guò)期時(shí)間

　　6. 路徑限制：存cookie時(shí)候可以指定路徑，只允許子路徑讀取外層cookie，外層不能讀取內(nèi)層。一般cookie都存在項(xiàng)目的根目錄，這樣就可以避免這種問(wèn)題。

　　cookie的使用

　　其實(shí), 如果是單純的身份驗(yàn)證場(chǎng)景下, 前端開(kāi)發(fā)是用不到cookie的

　　從服務(wù)器發(fā)送cookie給瀏覽器, 瀏覽器保存cookie, 到瀏覽器每次發(fā)送請(qǐng)求 ,攜帶著cookie文件, 這些事情瀏覽器全部都可以自己完成. 根本不需要我們前端開(kāi)發(fā)人員參與.

　　但我們有時(shí)也會(huì)利用cookie, 在前端存儲(chǔ)一些狀態(tài)信息.

　　比如某個(gè)視頻看到了32分15秒.

　　我們可以通過(guò)前端操作, 直接將這個(gè)數(shù)據(jù)保存在本地cookie文件中

　　下次打開(kāi)網(wǎng)站, 我們?cè)俅巫x取這個(gè)信息

　　然后直接向服務(wù)器請(qǐng)求32分16秒的視頻內(nèi)容.

　　前端如何通過(guò)JS操作cookie

　　cookie的使用方式很簡(jiǎn)單 ，系統(tǒng)提供的只有一個(gè)屬性 document.cookie，無(wú)論是存還是取或者其他操作都是通過(guò)這一個(gè)屬性來(lái)完成(注：cookie是http協(xié)議下的技術(shù)，所以不要用file的方式打開(kāi)本地html文件測(cè)試cookie，雖然由部分瀏覽器也在file協(xié)議下實(shí)現(xiàn)了cookie，但是不推薦這么做)。

　　首先，我們來(lái)看看如何存：

　　document.cookie = 'username=dary' // 存一條username為dary的cookie

　　但是如果當(dāng)我們要存一條中文的cookie，比如：username=張三，在部分低版本瀏覽器就會(huì)遇到一些位置錯(cuò)誤，這時(shí)就可以使用 encodeURIComponent 編碼對(duì)中文進(jìn)行編碼：

　　document.cookie = `username=encodeURIComponent('大林')`

　　可以看到，中文內(nèi)容已經(jīng)被編碼了，以后取得時(shí)候我們可以通過(guò)decodeURIComponent 方法進(jìn)行解碼，下文會(huì)提到

　　cookie的時(shí)效性

　　現(xiàn)在我們回頭去看看上面我們存過(guò)的cookie，其中有Expires/max-Age選項(xiàng)，這一項(xiàng)指的就是cookie的有效期，我們可以看到是session，代表會(huì)話期，也就是默認(rèn)的會(huì)話結(jié)束cookie失效，這時(shí)我們重啟瀏覽器就看不到這條cookie了。

　　除了默認(rèn)的會(huì)話過(guò)期我們還可以手動(dòng)設(shè)置cookie的過(guò)期時(shí)間，比如：7天后過(guò)期

　　var date = new Date()

　　date.setDate(date.getDate() + 7)

　　document.cookie = `username=${encodeURIComponent('大林')};expires=${date.toUTCString()}`

　　我們可以看到過(guò)期時(shí)間已經(jīng)是7天以后了，這里我用了toUTCString()方法轉(zhuǎn)成了標(biāo)準(zhǔn)時(shí)區(qū)，所以比北京時(shí)間快8個(gè)小時(shí)，這時(shí)我們關(guān)閉瀏覽器再次打開(kāi)，仍然可以看到這條cookie

　　cookie的存儲(chǔ)路徑

　　我們來(lái)測(cè)試一下路徑，隨便進(jìn)入項(xiàng)目中某一個(gè)目錄或者新建一個(gè)目錄，然后把一下代碼放進(jìn)去執(zhí)行

　　document.cookie = 'username=dary'

　　我們可以看到，path不再是之前的 / 了，而是當(dāng)前目錄，這時(shí)我們?cè)倩氐绞醉?yè)，你會(huì)發(fā)現(xiàn)，這條cookie不見(jiàn)了，因?yàn)橥鈱訒r(shí)訪問(wèn)不了內(nèi)層目錄存的cookie的。

　　所以我們一般存cookie都會(huì)這么寫(xiě)：

　　document.cookie = 'username=dary;path=/'

　　不管當(dāng)前目錄是誰(shuí)統(tǒng)一存根目錄，這樣項(xiàng)目中任意位置都可以訪問(wèn)這一條cookie，這就perfect 啦!

　　由此：我們可以封裝一個(gè)存儲(chǔ)cookie的方法如下：

　　/** 存一條cookie

　　* @param {string} key 要存的cookie的名稱(chēng)

　　* @param {string} value 要存的cookie的值

　　* @param {object} [options] 可選參數(shù)，過(guò)期時(shí)間和目錄，如：{ path: '/', expires: 7 }存根目錄7天過(guò)期的cookie

　　*/

　　function setCookie (key, value, options) {

　　var str = `${key}=${encodeURIComponent(value)}`

　　// 先判斷options是否傳進(jìn)來(lái)了

　　if (options) {

　　// 如果傳進(jìn)來(lái)了再判斷有哪個(gè)屬性

　　if (options.path) {

　　// 路徑拼接進(jìn)去

　　str += `;path=${options.path}`

　　}

　　if (options.expires) {

　　var date = new Date()

　　// 日期設(shè)置為過(guò)期時(shí)間

　　date.setDate(date.getDate() + options.expires)

　　str += `;expires=${date.toUTCString()}`

　　}

　　}

　　document.cookie = str

　　}

　　取cookie

　　現(xiàn)在我們掌握了如何存cookie，接下來(lái)看看怎么取吧

　　取cookie同樣使用document.cookie這個(gè)屬性：

　　console.log(document.cookie) // username=dary

　　但是如果我們?cè)谝粋€(gè)網(wǎng)站里存了多條cookie，這個(gè)時(shí)候得到的結(jié)果就是

　　console.log(document.cookie) // username=dary; age=18

　　多條cookie之間以; 隔開(kāi)，注意：這里是分號(hào)和一個(gè)空格，這個(gè)對(duì)我們拆開(kāi)每一條cookie非常重要。所以我們現(xiàn)在希望能把cookie每一條拆開(kāi)，得到一個(gè)對(duì)象，這樣就可以取得某一條cookie的值了，所以我們可以封裝一個(gè)獲取cookie的方法如下：

　　/** 獲取某一條cookie

　　* @param {string} key 要獲取的cookie的名稱(chēng)

　　* @retrun {string} 當(dāng)前這條cookie的值

　　*/

　　getCookie (key) {

　　var str = document.cookie

　　var arr = str.split('; ')

　　var obj = new Object()

　　arr.forEach(item => {

　　var subArr = item.split('=')

　　obj[subArr[0]] = decodeURIComponent(subArr[1])

　　})

　　return obj[key]

　　}

　　刪除cookie

　　刪除cookie的方式特別簡(jiǎn)單，我們只需要把cookie的過(guò)期時(shí)間設(shè)置為已經(jīng)過(guò)去了的時(shí)間就行了，這個(gè)時(shí)候?yàn)g覽器一看，誒?這條cookie不是已經(jīng)過(guò)期了么?就只能把它刪掉了 ，方法如下：

　　/** 刪一條cookie

　　* @param {string} key 要?jiǎng)h的cookie的名稱(chēng)

　　* @param {path} [path] 可選參數(shù)，要?jiǎng)h的cookie的所在的路徑，如果就是當(dāng)前路徑這個(gè)參數(shù)可以不傳

　　*/

　　function removeCookie (key, path) {

　　var date = new Date()

　　date.setDate(date.getDate() - 1) // 過(guò)期時(shí)間設(shè)置為昨天

　　var str = `${key}='';expires=${date.toUTCString()}`

　　if (path) {

　　str += `;path=${path}`

　　}

　　document.cookie = str

　　}

　　修改cookie

　　重新存一下把之前的覆蓋掉就是修改了cookie了

　　最后附上一個(gè)cookie方法，既可以完成存也可以取，甚至可以刪

　　// 通過(guò)判斷有沒(méi)有傳第二個(gè)參數(shù)value來(lái)決定是存還是取

　　// 這個(gè)方法也可以用域刪cookie，比如：cookie('username', '', { expires: -1, path: '/' })

　　function cookie (key, value, options) {

　　if (value) {

　　var str = `${key}=${encodeURIComponent(value)}`

　　if (options) {

　　if (options.path) {

　　str += `;path=${options.path}`

　　}

　　if (options.expires) {

　　var date = new Date()

　　date.setDate(date.getDate() + options.expires)

　　str += `;expires=${date.toUTCString()}`

　　}

　　}

　　document.cookie = str

　　} else {

　　var str = document.cookie

　　var arr = str.split('; ')

　　var obj = new Object()

　　arr.forEach(item => {

　　var subArr = item.split('=')

　　obj[subArr[0]] = decodeURIComponent(subArr[1])

　　})

　　return obj[key]

　　}

　　}