在知乎上回答過(guò) Cookie 從哪里來(lái)，網(wǎng)站用它來(lái)干嘛? 這樣一個(gè)問(wèn)題春叫，它只介紹了Cookie是什么残家。但作為一個(gè)職場(chǎng)多年，發(fā)現(xiàn)很多工作數(shù)年的同事骑歹，對(duì)Cookie對(duì)理解仍舊還不夠预烙。這才有了這篇文章，嘗試從實(shí)用對(duì)角度來(lái)介紹Cookie道媚。
1. Cookie和其他本地存儲(chǔ)
最常見(jiàn)用到對(duì)本地存儲(chǔ)除了Cookie之外扁掸，還有l(wèi)ocalStorage和sessionStorge，它們是客戶端主動(dòng)寫(xiě)最域，和Cookie主要由服務(wù)器寫(xiě)（set-cookie）有所不同谴分。
localStorage和sessionStorge之間則存在著有效期、作用域的差別镀脂，可以參考：JavaScript權(quán)威指南 第20章 存儲(chǔ) 的第1.2節(jié)牺蹄。
2. 第一方和第三方Cookie
以打開(kāi) http://www.reibang.com 為例，可以看到Cookies欄包含了來(lái)自 http://www.reibang.com 和 https://googleads./g.doubleclick.net 的Cookie薄翅。
其中打開(kāi)網(wǎng)址種的Cookie叫第一方Cookie沙兰，網(wǎng)址引用的資源（比如圖片 js）所屬服務(wù)器所種的Cookie叫第三方Cookie。第三方Cookie的一個(gè)應(yīng)用翘魄，就是廣告商用于分析用戶數(shù)據(jù)鼎天，2020年Google已經(jīng)在申明中湖i逐步取消第三方Cookie的權(quán)限。
3. Cookie怎么種上的
第二節(jié)中看到了jianshu種下了9個(gè)Cookie暑竟，查看 http://www.reibang.com的Response斋射，可以看到通過(guò)Set-Cookie，寫(xiě)了4個(gè)Cookie但荤。
另外可以通過(guò)在請(qǐng)求中加載的JS代碼中罗岖，看到setCookie的代碼，可見(jiàn)jianshu也利用JS在本地設(shè)置了一些Cookie腹躁。
4. Cookie被使用的規(guī)則
一句話概括：Cookie被種哪里（文檔+路徑）下呀闻，發(fā)出這個(gè)規(guī)則的請(qǐng)求就會(huì)攜帶Cookie。
比如在 www.reibang.com 下種了__yadk_uid潜慎，那么訪問(wèn)http://www.reibang.com/p/207585cb1bc5
的時(shí)候捡多，就會(huì)攜帶這個(gè)Cookie。
而假如jianshu的服務(wù)器后端接口域名為api.jianshu.com铐炫，那么上述Cookie就不會(huì)被攜帶垒手，而.jianshu.com種的sensorsdata2015jssdkcross和sajssdk_2015_cross_new_user就會(huì)被帶上。
5. 關(guān)于Cookie的作用域和有效期
我們?cè)谝粋€(gè)瀏覽器tab上登陸了jianshu以后倒信，在新的瀏覽器tab打開(kāi)科贬，肯定是不用再重新登陸的，也就是說(shuō)作用域應(yīng)該是文檔+路徑（為什么不說(shuō)域名，后面會(huì)介紹）相關(guān)聯(lián)的榜掌，只要還是這個(gè)文檔+路徑优妙，就仍舊可以訪問(wèn)到這個(gè)Cookie。
通過(guò)第2節(jié)中的圖片憎账，我們看到又一欄叫Expires/Max-Age套硼，也就是說(shuō)Cookie的有效期是的服務(wù)器可以設(shè)定的，可以是具體實(shí)踐胞皱，也可以是想session這樣的邪意。
6. 只有文檔（頁(yè)面）可以中Cookie嗎
因?yàn)橄到y(tǒng)登陸是通過(guò)接口登陸的，在登陸成功后反砌，很多后端實(shí)現(xiàn)會(huì)在Response中也通過(guò)Set-Cookie來(lái)往瀏覽器上寫(xiě)Cooike雾鬼。
下圖是一個(gè)例子，一個(gè)后端調(diào)用的Response中攜帶了Token信息宴树，并且指定了對(duì) eleme.test 域名起作用策菜。
這里比較容易誤解的一點(diǎn)是，如果你訪問(wèn)了a.com網(wǎng)站酒贬，如果它的后端地址是b.com并且Cookie也是種在這個(gè)地址上做入，那么直接通過(guò)瀏覽器對(duì)Application-Cookies中能看到的僅是和a.com相關(guān)的第一方和第三方的Cookie。
想查看b.com的Cookie同衣，可以直接拷貝 b.com的地址在瀏覽器上訪問(wèn)，然后通過(guò)查看Network壶运，就可以看到在b.com上的Cookie耐齐。
7. 關(guān)于Cookie的更多
JavaScript權(quán)威指南 第20章 存儲(chǔ) 比較詳細(xì)的介紹了Cookie，僅本篇文章還不足以介紹它的文檔+路徑的概念蒋情，有效期的設(shè)置埠况，以及Secure、HttpOnly等的使用棵癣。
當(dāng)然隨著使用也會(huì)發(fā)現(xiàn)一些在你理解之外的東西辕翰，這里先歸檔如下，期望你來(lái)解答狈谊。
問(wèn)題1: 設(shè)置Domain和服務(wù)器地址不一致
在實(shí)際觀察中（如下圖標(biāo)記為3的位置）喜命，發(fā)現(xiàn)一個(gè)Domain中的地址可以和源文檔沒(méi)有任何關(guān)系，即網(wǎng)站是 a.b.com河劝，卻可以設(shè)置Cookie在xyz.com上壁榕，而不僅限于 a.b.com 或 .b.com，這是為什么呢赎瞎？豈不是可以隨意覆寫(xiě)其他Domain的Cookie值牌里？
