把cookie聊清楚

前言

cookie在web開發中時常被用到，也是面試官喜歡問的一塊技術，不少人或許和我之前同樣，只知其一不知其二，談起web存儲，都會答localStorage、sessionStorage、還有就是cookie，而後一些區別啊什麼的滾瓜爛熟，cookie的優缺點也瞭然於心，可是當你看完這塊內容以後，你會對cookie有另外獨到的看法，但願之後問到這塊技術，或者項目中遇到這個你都會處理，我在實習的過程當中，一直在用，因此它真的不是口頭說說的那麼簡單，讓咱們進入cookie的世界

cookie是什麼

這個講起來很簡單，瞭解http的同窗，確定知道，http是一個不保存狀態的協議，什麼叫不保存狀態，就是一個服務器是不清楚是否是同一個瀏覽器在訪問他，在cookie以前，有另外的技術是能夠解決，這裏簡單講一下，就是在請求中插入一個token，而後在發送請求的時候，把這個東西帶給服務器，這種方式是易出錯，因此有了cookie的出現

cookie

cookie是什麼，cookie就是一種瀏覽器管理狀態的一個文件，它有name，也有value，後面那些看不見的是Domain、path等等，咱們後面會介紹

cookie原理

cookieSend

第一次訪問網站的時候，瀏覽器發出請求，服務器響應請求後，會將cookie放入到響應請求中，在瀏覽器第二次發請求的時候，會把cookie帶過去，服務端會辨別用戶身份，固然服務器也能夠修改cookie內容

cookie不可跨域

我就幾個例子你就懂了，當我打開百度的網頁，我要設置一個cookie的時候，個人指令以下

javascript:document.cookie='myname=laihuamin;path=/;domain=.baidu.com';複製代碼

javascript:document.cookie='myname=huaminlai;path=/;domain=.google.com';複製代碼

當我將這兩個語句都放到瀏覽器控制檯運行的時候，你會發現一點,注意，上面兩個cookie的值是不相同的，看清楚

cookieDontDomain

顯而易見的是，真正能把cookie設置上去的只有domain是.baidu.com的cookie綁定到了域名上，因此上面所說的不可跨域性，就是不能在不一樣的域名下用，每一個cookie都會綁定單一的域名

cookie的屬性

cookie的屬性衆多，咱們能夠來看一下下面這張圖，而後咱們一個一個分析

cookieAttr

name

這個顯而易見，就是表明cookie的名字的意思，一個域名下綁定的cookie，name不能相同，相同的name的值會被覆蓋掉，有興趣的同窗能夠試一試，我在項目中切實用到過

value

這個就是每一個cookie擁有的一個屬性，它表示cookie的值，可是我在這裏想說的不是這個，由於我在網上看到兩種說法，以下：

1.cookie的值必須被URL編碼

2.對cookie的值進行編碼不是必須的，還舉了原始文檔中所說的，僅對三種符號必須進行編碼：分號、逗號和空格

這個東西得一分爲二來看，先看下面的圖

cookievalue

我在網上看到那麼一種說法：

因爲cookie規定是名稱/值是不容許包含分號，逗號，空格的，因此爲了避免給用戶到來麻煩，考慮服務器的兼容性，任何存儲cookie的數據都應該被編碼。

domain

這個是指的域名，這個表明的是，cookie綁定的域名，若是沒有設置，就會自動綁定到執行語句的當前域，還有值得注意的點，統一個域名下的二級域名也是不能夠交換使用cookie的，好比，你設置www.baidu.com和image.baidu.com,依舊是不能公用的

path

path這個屬性默認是'/'，這個值匹配的是web的路由，舉個例子：

//默認路徑
www.baidu.com
//blog路徑
www.baidu.com/blog複製代碼

我爲何說的是匹配呢，就是當你路徑設置成/blog的時候，其實它會給/blog、/blogabc等等的綁定cookie

cookie的有效期

cookieMaxAge

什麼是有效期，就是圖中的Expires屬性，通常瀏覽器的cookie都是默認儲存的，當關閉瀏覽器結束這個會話的時候，這個cookie也就會被刪除，這就是上圖中的——session(會話儲存)。

若是你想要cookie存在一段時間，那麼你能夠經過設置Expires屬性爲將來的一個時間節點，Expires這個是表明當前時間的，這個屬性已經逐漸被咱們下面這個主人公所取代——Max-Age

Max-Age，是以秒爲單位的，Max-Age爲正數時，cookie會在Max-Age秒以後，被刪除，當Max-Age爲負數時，表示的是臨時儲存，不會生出cookie文件，只會存在瀏覽器內存中，且只會在打開的瀏覽器窗口或者子窗口有效，一旦瀏覽器關閉，cookie就會消失，當Max-Age爲0時，又會發生什麼呢，刪除cookie，由於cookie機制自己沒有設置刪除cookie，失效的cookie會被瀏覽器自動從內存中刪除，因此，它實現的就是讓cookie失效。

secure

cookieSecure

這個屬性譯爲安全，http不只是無狀態的，仍是不安全的協議，容易被劫持，打個比方，你在手機端瀏覽網頁的時候，有沒有中國移動圖標跳出來過，閒言少敘，當這個屬性設置爲true時，此cookie只會在https和ssl等安全協議下傳輸

• 提示：這個屬性並不能對客戶端的cookie進行加密，不能保證絕對的安全性

HttpOnly

這個屬性是面試的時候常考的，若是這個屬性設置爲true，就不能經過js腳原本獲取cookie的值，能有效的防止xss攻擊,看MDN的官方文檔：

httpOnly

關於js操做cookie

document.cookie能夠對cookie進行讀寫，看一下兩條指令：

//讀取瀏覽器中的cookie
console.log(document.cookie);
//寫入cookie
document.cookie='myname=laihuamin;path=/;domain=.baidu.com';複製代碼

服務端如何去設置cookie

關於怎麼設置cookie，咱們只要打開控制檯，看一個http的請求頭和響應頭中的東西便可明白：

setCookie

服務端就是經過setCookie來設置cookie的，注意點，要設置多個cookie時，得多寫幾個setCookie，咱們還能夠從上圖看到，請求能夠攜帶cookie給後端。

總結

cookie講了這麼多，本身也收穫了不少，也但願分享給你們，或許寫的不夠好，請見諒，若是以爲我寫的好的朋友，給個star，github地址