一. 前言(一些廢話)

瀏覽器Cookie相信各位點(diǎn)進(jìn)這篇文章的小伙伴應(yīng)該不陌生了，它是前端領(lǐng)域中一個(gè)非常重要的內(nèi)容，當(dāng)然也是面試的一個(gè)考點(diǎn)，不知道各位小伙伴是否真正掌握了Cookie呢?當(dāng)然沒(méi)有掌握也是沒(méi)有關(guān)系的，可以跟著小編的腳步一起來(lái)學(xué)習(xí)一下前端Cookie，沒(méi)有熟練掌握的小伙伴看完這篇文章可能會(huì)對(duì)瀏覽器Cookie有一個(gè)新的認(rèn)知。

PS:我這里講的是前端Cookie并非后端領(lǐng)域的Cookie如果點(diǎn)贊夠多可以考慮寫一篇后端的。

二. Cookie

1. 為什么會(huì)有Cookie

web應(yīng)用程序是使用HTTP協(xié)議傳輸數(shù)據(jù)的，然而HTTP協(xié)議是無(wú)狀態(tài)的協(xié)議，一旦數(shù)據(jù)交換完畢，客戶端與服務(wù)器端的連接就會(huì)關(guān)閉，再次交換數(shù)據(jù)需要建立新的連接。這就意味著服務(wù)器無(wú)法從連接上跟蹤會(huì)話。
你可能會(huì)有這樣的經(jīng)歷，登錄一個(gè)網(wǎng)站的時(shí)候會(huì)提醒你要不要記住賬戶和密碼，這樣下次來(lái)你就不用再次輸入賬號(hào)和密碼了。這就是cookie的作用，當(dāng)我們?cè)俅卧L問(wèn)的時(shí)候，方便服務(wù)器直接根據(jù)我們的Cookie來(lái)直接取上一次去過(guò)的東西（對(duì)于，每一個(gè)cookie服務(wù)器會(huì)對(duì)這個(gè)cookie存儲(chǔ)上一次我們拿過(guò)的數(shù)據(jù)，下一次對(duì)于同一個(gè)cookie的時(shí)候，就直接在這里取。

2. Cookie的特性

當(dāng)服務(wù)器收到 HTTP 請(qǐng)求時(shí)，服務(wù)器可以在響應(yīng)頭里設(shè)置一個(gè) Set-cookie 選項(xiàng)，瀏覽器接收到響應(yīng)后會(huì)自動(dòng)保存下 Cookie，之后瀏覽器對(duì)該服務(wù)器的每一次請(qǐng)求中都會(huì)通過(guò)請(qǐng)求頭把 Cookie 信息發(fā)送給服務(wù)器，這就是Cookie的來(lái)源。
當(dāng)然Cookie在瀏覽器中也是有個(gè)數(shù)和大小的限制，大小一般是4k，個(gè)數(shù)的問(wèn)題每種瀏覽器的限制都不同，可以參考下面的表格。

值得注意的是:Cookie存儲(chǔ)信息不安全（不能存放重要的信息）,Cookie中有域（domain）和路徑的概念,瀏覽器是一個(gè)比較安全的環(huán)境，所以不同的域之間不能直接訪問(wèn)（js的同源策略限制）
PS:但是因?yàn)闉g覽器的每次請(qǐng)求都會(huì)攜帶上 Cookie，會(huì)帶來(lái)額外的開銷，而且存儲(chǔ)量比較小，所以后來(lái)瀏覽器推出了新的 Api(web stoeage Api和 indexedDb)

3. 瀏覽器Cookie

打開瀏覽器的開發(fā)者工具 都可以在【應(yīng)用】選項(xiàng)卡中看到當(dāng)前瀏覽器所存儲(chǔ)的Cookie，如下圖。

其中字段名含義:

• Name：cookie的名字(鍵)
• Value：cookie存放的值
• Expires：指cookie過(guò)期的時(shí)間（該時(shí)間為世界時(shí)間 UTC時(shí)間）也稱為格林威治時(shí)間
• Max-Age: 指cookie最大的存活有效期（單位：秒）
• Domain: 指的是cookie當(dāng)前的域
• Path:指cookie當(dāng)前的路徑
• Size: 指cookie存放的大小
• Secure: 指cooke的安全屬性

4. 跨站和跨域

跨站和跨域，是了解Cookie的必備知識(shí)

所以只要頂級(jí)域名和二級(jí)域名一樣就是同站

再舉兩個(gè)例子 a.com 于 b.com 就屬于跨站了，而 a.a.com 與 b.a.com 則是屬與同站，因?yàn)槎?jí)域名和頂級(jí)域名相同，關(guān)于跨域詳細(xì)的講解就不在這里展開了，點(diǎn)贊多的話小編可以考慮后面寫一篇相關(guān)文章。

三. Cookie操作

1. 獲取Cookie

可以在瀏覽器控制臺(tái)輸入 document.cookie 就可以獲取到當(dāng)前所在網(wǎng)站標(biāo)記存儲(chǔ)的部分Cookie信息。
獲取到的是一串字符串，序列化方式是: k1=v1;k2=v2;k3=v3

為什么說(shuō)獲取到的只是部分的Cookie，因?yàn)橹灰狧ttpOnly打鉤的js是無(wú)法獲取和操作的，這種Cookie是只能由服務(wù)端和瀏覽器來(lái)操作，通常這種Cookie是用來(lái)存儲(chǔ)一些用戶身份信息或者安全相關(guān)的憑證的

可以使用下面的代碼將Cookie儲(chǔ)存到一個(gè)對(duì)象中

function deal(){ var cookie = document.cookie;
var arr = cookie.split('; ');//注意是 分號(hào)空格
var obj = {};
    arr.forEach(function(item){
       var itemArr = item.split('=');
       obj[itemArr[0]] = itemArr[1];
})
    return obj;
}

2. 設(shè)置Cookie

在瀏覽器中設(shè)置Cookie也是通過(guò) document.cookie 來(lái)操作的，以鍵值對(duì)的方式向?yàn)g覽器存儲(chǔ)Cookie

可以看到已經(jīng)設(shè)置成功了

3. 修改Cookie

變更修改已經(jīng)存儲(chǔ)于瀏覽器的Cookie也很簡(jiǎn)單還是使用document.cookie 來(lái)操作只要將相同key的值重新賦值一遍就相當(dāng)以修改了已經(jīng)存儲(chǔ)完成的Cookie值

可以看到更新成功

4. 刪除Cookie

刪除Cookie的值也很簡(jiǎn)單，還是使用document.cookie 來(lái)操作只需要將要?jiǎng)h除的Cookie對(duì)應(yīng)的鍵置空，然后再加上max-age的值為-1

執(zhí)行完成后這條Cookie就消失了

四. Cookie屬性

1. Cookie屬性Domain

Domain是用來(lái)設(shè)置Cookie能夠作用到的主機(jī)地址，存儲(chǔ)在瀏覽器時(shí)不攜帶協(xié)議和端口。因?yàn)槎丝诤蛥f(xié)議不同并不會(huì)影響Cookie但是Cookie的部分屬性只有在Https下才能有效，這也是Cookie的特性之一，不區(qū)分協(xié)議和端口。
如果前面有個(gè). 如下 .baidu.con 就證明當(dāng)前的Cookie可以作用于當(dāng)前域及其子域，假如下面的Cookie在 niuma.baidu.com 中是可以訪問(wèn)到的 而前面沒(méi)有這個(gè).的Cookie在 niuma.baidu.com 中無(wú)法訪問(wèn)到 只能在baidu.com 中訪問(wèn)到。

在設(shè)置Cookie時(shí)如果沒(méi)有設(shè)置Domain屬性那么這個(gè)Cookie只能作用于當(dāng)前域
有一個(gè)注意的點(diǎn)就是設(shè)置Cookie時(shí)設(shè)置了domain屬性向下面

在瀏覽器存儲(chǔ)Cookie的地方竟然變成了 .uicool123.com ??? 這是值得大家注意的地方

設(shè)置domain=.uicool123.com 的時(shí)候還是跟上面的情況一樣，也就是說(shuō)兩種doamin屬性的設(shè)置方法是一樣的。
關(guān)于domain還有最后一點(diǎn)值得注意，就是在子域中可以給父域設(shè)置Cookie
比如我們?cè)?niu.uicool123.com 中設(shè)置Cookie ，doamin屬性設(shè)置為 .uicool123.com 那么我們可以在 uicool123.com 中獲取到這個(gè)Cookie也可以在 hhh.uicool123.com 中獲取到這個(gè)Cookie 因?yàn)檫@個(gè)Cookie是作用于uicool123.com和它的子域的。
但是我們不能在當(dāng)前域的子域或者跨域設(shè)置Cookie，比如我們?cè)?uicool123.com 的控制臺(tái)設(shè)置 Cookie時(shí)domain屬性不能設(shè)置為 hhh.uicool123.com 或者 baidu.com

2. Cookie屬性path

Cookie的path用來(lái)指定URL的路徑

假如我們?cè)赼.com/a的控制臺(tái)設(shè)置如下的Cookie

document.cookie='myname=牛馬;path=/a'

那么只要前綴是 a.com/a 的路徑下都可以訪問(wèn)到這個(gè)Cookie 比如 a.com/a/b/c a.com/a/b
而在前綴不是a.com/a 的路徑下是無(wú)法訪問(wèn)這個(gè)Cookie的 比如 a.com/b a.com/b/a
這個(gè)屬性用的比較少，一般都是設(shè)置為/路徑

3. Cookie屬性expires

expires 屬性是來(lái)設(shè)置Cookie有效期相關(guān)的屬性，expires 指定Cookie失效的具體時(shí)間
注意: 當(dāng)與max-age屬性同時(shí)存在時(shí)max-age的優(yōu)先級(jí)會(huì)更高

列如設(shè)置一個(gè) 2022年11月26日凌晨1點(diǎn)10過(guò)期的Cookie

document.cookie=`myname=牛馬;expires=${new Date('2022-11-26 01:10:00').toUTCString()}`

可以看到已經(jīng)設(shè)置好了

這個(gè)expires屬性也可以設(shè)置為過(guò)去的時(shí)間,生效后瀏覽器會(huì)立即刪除這條Cookie
當(dāng)一個(gè)Cookie既不包含expires也不包含max-age屬性那么，這個(gè)Cookie就是一個(gè)會(huì)話Cookie，當(dāng)你關(guān)閉瀏覽器時(shí)這個(gè)Cookie會(huì)被自動(dòng)刪除，刷新和關(guān)閉當(dāng)前頁(yè)面是不會(huì)刪除的。

4. Cookie屬性max-age

max-age 屬性也是用來(lái)設(shè)置CooKie有效期相關(guān)的屬性，max-age 指定Cookie多少秒后失效

比如我們?cè)O(shè)置一個(gè)600秒后過(guò)期的Cookie

document.cookie=`myname=牛馬;max-age=600`

可以看到設(shè)置成功

注意:當(dāng)expires 和 max-age屬性都設(shè)置時(shí)max-age的設(shè)置會(huì)優(yōu)先，如果max-age設(shè)置為負(fù)值那就是刪除Cookie
當(dāng)一個(gè)Cookie既不包含expires也不包含max-age屬性那么，這個(gè)Cookie就是一個(gè)會(huì)話Cookie，當(dāng)你關(guān)閉瀏覽器時(shí)這個(gè)Cookie會(huì)被自動(dòng)刪除，刷新和關(guān)閉當(dāng)前頁(yè)面是不會(huì)刪除的。

5. Cookie屬性httponly

httponly 是和Cookie安全性緊密相關(guān)的一個(gè)Cookie，上面也有提及到。
只要HttpOnly打鉤的js是無(wú)法獲取和操作的，這種Cookie是只能由服務(wù)端和瀏覽器來(lái)操作，通常這種Cookie是用來(lái)存儲(chǔ)一些用戶身份信息或者安全相關(guān)的憑證的。

這種Cookie只能通過(guò)服務(wù)端響應(yīng)設(shè)置

在瀏覽器設(shè)置這個(gè)屬性的Cookie時(shí)這個(gè)Cookie會(huì)被瀏覽器直接忽略掉

5. Cookie屬性secure

secure 這個(gè)屬性用來(lái)告訴瀏覽器這個(gè)Cookie只能用https協(xié)議傳輸，如果服務(wù)端的響應(yīng)中包含有secure屬性的Cookie，但是當(dāng)前的協(xié)議是http的，那么瀏覽器會(huì)直接忽略這個(gè)Cookie
當(dāng)我們?cè)跒g覽器創(chuàng)建了一個(gè)帶有secure的屬性

那么當(dāng)我們向https://a.com 發(fā)起請(qǐng)求時(shí)就會(huì)攜帶上這個(gè)Cookie
而當(dāng)我們請(qǐng)求http://a.com時(shí)的時(shí)候是不會(huì)攜帶這個(gè)Cookie的

6. Cookie屬性samesite

關(guān)于samesite這是一個(gè)變動(dòng)比較大的屬性，samesite屬性可以限制跨站請(qǐng)求時(shí)Cookie發(fā)送，samesite的值有三個(gè)

關(guān)于samesite屬性為None的Cookie，雖然約束性最弱但是只有這個(gè)cookie是HTTPS協(xié)議進(jìn)行傳輸?shù)臅r(shí)候?yàn)g覽器才認(rèn)為它是有效的另外這個(gè)cookie.必須要添加secure屬性，否則無(wú)法保存。
我們可以創(chuàng)建4個(gè)Cookie


可以看到在沒(méi)有設(shè)置samesite屬性時(shí)瀏覽器并不會(huì)自動(dòng)添加lax。
當(dāng)請(qǐng)求同域地址時(shí)這4個(gè)Cookie都會(huì)帶上
注意:samesite只有在跨站請(qǐng)求的時(shí)候才會(huì)起作用

五. 結(jié)尾

最后還有幾個(gè)不怎么常用的Cookie屬性小編就不細(xì)說(shuō)了，感興趣的小伙伴可以自行查找相關(guān)文章，如果文章有錯(cuò)誤的地方各位讀者朋友可以在評(píng)論區(qū)指出，感謝大家的閱讀。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-442547.html

到了這里，關(guān)于一篇文章帶你搞懂前端Cookie的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！