在正式介紹cookie之前我們要先來說一說網絡通訊協議
首先：什么是網絡通訊協議?所謂協議一般就是甲乙雙方溝通要遵循的規則與方式，那么通訊協議就是通訊雙方要遵循的規則，網絡通訊協議則是計算機雙方傳輸數據所要遵循的協議，瀏覽網頁時, 一般使用http或者https，而它們都是基于TCP/IP協議的。
TCP/IP協議是面向連接的
在發送數據之前，都必須先在雙方之間建立一條連接。在TCP/IP協議中，TCP 協議提供可靠的連接服務，連接是通過三次握手進行初始化的，如下圖：
客戶端要向服務器發送請求，首先會發送一個請求連接，這是第一次握手;
當服務器收到這個請求以后返回給客戶端一條消息，這是第二次握手;
然后客戶端再把確認消息發給服務器，這是第三次握手;
經過這三次握手客戶端與服務器之間的連接就建立起來了。
就像打電話一樣，客戶端向服務器撥通電話，服務器接起電話，說了一句：“喂?”，然后客戶端收到了這句“喂”，再跟服務器說一聲“喂!”，連接就建立好了，可以愉快的通話了
建立連接需要經過三次握手，那數據傳輸結束以后呢?我們打電話事情說完了要掛掉電話要經歷一個怎樣的過程?可能對話是下面這樣的：
A：“我掛了”
B：“好”
A：“拜拜”
B：“拜拜，我也掛了”
A：“好，拜拜”
B：“嗯嗯，拜拜，掛了”
A：“好，拜拜”
B：“拜拜”
有點搞笑 ，經過好多次消息確認好不容易才能把電話掛掉，但這并不是無聊，而是要互相確認對方是否真的已經準備斷開連接了，那么我們的TCP/IP協議也會考慮到這一點，要斷開連接會經過四次揮手，如下圖：
數據傳輸結束時，客戶端向服務器發送一條結束的消息，服務器收到消息后會馬上返回給客戶端確認消息，并隨后發送一條“我也結束了”的消息，當客戶端收到這條消息以后會響應給服務器確認消息，服務器收到這條確認消息以后就會關閉，而客戶端則會等待兩個單位時間之后關閉。注意這里客戶端并不是立馬關閉，而是會等帶兩個單位時間，為什么是兩個單位時間呢?首先，所謂的單位時間指的是一次前后端數據傳輸所花費的時間，這里要等待兩個單位時間是因為客戶端要等數據發送到服務器以后確認收不到數據返回，這一來一去就是兩個單位時間了，因為如果這個時候服務器并沒有結束的話會再次給客戶端響應，而客戶端在兩個單位時間后收不到響應則代表本次數據傳輸正式結束。
下面貼出兩張動圖：
這兩張動圖對于計算機專業的讀者可以嘗試探究，本文不做詳細展開
http無狀態
HTTP協議, 使我們用戶上網常見的協議, 簡單的理解, 它是基于TCP/IP協議改造加工出來的，也就是說每一個http請求都會通過三次握手建立連接，傳輸數據, 然后四次揮手斷開連接.
例如當你登錄淘寶的時候, 你的瀏覽器跟淘寶服務器之間就行了 一個 http鏈接.
然后, 當首頁數據加載完成, 鏈接就斷開了.
這時服務就無法保存你的狀態. 你瀏覽了什么商品? 購物車加了幾個東西? 有沒有關閉瀏覽器? 服務器統統不知道了
所以, 我們說：http協議是一種無狀態協議，這里的無狀態指的是無法保存狀態，因為一旦數據傳輸結束連接就會斷開，就無法獲取一些狀態了，這樣設計的好處就是可以節約資源，需要的時候才發出請求，但是也會造成一些困擾，
尤其是關于身份驗證. 用戶在登錄頁面完成了登錄，那么接下來就會回到首頁或者其他頁面進行操作，但問題是這個時候登錄的這次http請求已經結束了，所以當完成頁面跳轉之后就取不到登錄狀態了，那怎么辦?再登錄一次?
當你反復使用http協議跟服務器建立鏈接的時候, 服務器怎么才能知道, 你是一個登錄過的合法用戶?? 為了解決這個問題, 出現了cookie技術.
cookie
cookie稱之為會話跟蹤技術，顧名思義，就是在一次會話中跟蹤記錄一些狀態。首先，所謂的”會話“指的就是從瀏覽器打開一個網站到訪問它的其他網頁直到瀏覽器關閉的這個過程。
cookie就可以在一次會話從開始到結束的整個過程，全程跟蹤記錄客戶端的狀態(例如：是否登錄、購物車信息、是否已下載、是否 已點贊、視頻播放進度等等)。
cookie是服務器存儲在客戶端本地的一個文件. 它就好比服務器發給客戶端的一個身份標識, 有了這個身份牌, 只要客戶端隨身攜帶這個身份牌. 服務器就能識別我們的身份了
cookie的特點
1. 只能存儲文本
2. 單條存儲有大小限制4KB左右
3. 數量限制(一般瀏覽器，限制大概在50條左右)
4. 讀取有域名限制：不可跨域讀取，只能由來自 寫入cookie的 同一域名 的網頁可進行讀取。簡單的講就是，哪個服務器發給你的cookie，只有哪個服務器有權利讀取(身份牌是我的，當然只有我能讀取，你媳婦兒的手機自動連接了鄰居老王家的wifi，你知道這意味著什么嗎?)
5. 時效限制：每個cookie都有時效，默認的有效期是，會話級別：就是當瀏覽器關閉，那么cookie立即銷毀，但是我們也可以在存儲的時候手動設置cookie的過期時間
6. 路徑限制：存cookie時候可以指定路徑，只允許子路徑讀取外層cookie，外層不能讀取內層。一般cookie都存在項目的根目錄，這樣就可以避免這種問題。
cookie的使用
其實, 如果是單純的身份驗證場景下, 前端開發是用不到cookie的
從服務器發送cookie給瀏覽器, 瀏覽器保存cookie, 到瀏覽器每次發送請求 ,攜帶著cookie文件, 這些事情瀏覽器全部都可以自己完成. 根本不需要我們前端開發人員參與.
但我們有時也會利用cookie, 在前端存儲一些狀態信息.
比如某個視頻看到了32分15秒.
我們可以通過前端操作, 直接將這個數據保存在本地cookie文件中
下次打開網站, 我們再次讀取這個信息
然后直接向服務器請求32分16秒的視頻內容.
前端如何通過JS操作cookie
cookie的使用方式很簡單 ，系統提供的只有一個屬性 document.cookie，無論是存還是取或者其他操作都是通過這一個屬性來完成(注：cookie是http協議下的技術，所以不要用file的方式打開本地html文件測試cookie，雖然由部分瀏覽器也在file協議下實現了cookie，但是不推薦這么做)。
首先，我們來看看如何存：
document.cookie = 'username=dary' // 存一條username為dary的cookie
但是如果當我們要存一條中文的cookie，比如：username=張三，在部分低版本瀏覽器就會遇到一些位置錯誤，這時就可以使用 encodeURIComponent 編碼對中文進行編碼：
document.cookie = `username=encodeURIComponent('大林')`
可以看到，中文內容已經被編碼了，以后取得時候我們可以通過decodeURIComponent 方法進行解碼，下文會提到
cookie的時效性
現在我們回頭去看看上面我們存過的cookie，其中有Expires/max-Age選項，這一項指的就是cookie的有效期，我們可以看到是session，代表會話期，也就是默認的會話結束cookie失效，這時我們重啟瀏覽器就看不到這條cookie了。
除了默認的會話過期我們還可以手動設置cookie的過期時間，比如：7天后過期
var date = new Date()
date.setDate(date.getDate() + 7)
document.cookie = `username=${encodeURIComponent('大林')};expires=${date.toUTCString()}`
我們可以看到過期時間已經是7天以后了，這里我用了toUTCString()方法轉成了標準時區，所以比北京時間快8個小時，這時我們關閉瀏覽器再次打開，仍然可以看到這條cookie
cookie的存儲路徑
我們來測試一下路徑，隨便進入項目中某一個目錄或者新建一個目錄，然后把一下代碼放進去執行
document.cookie = 'username=dary'
我們可以看到，path不再是之前的 / 了，而是當前目錄，這時我們再回到首頁，你會發現，這條cookie不見了，因為外層時訪問不了內層目錄存的cookie的。
所以我們一般存cookie都會這么寫：
document.cookie = 'username=dary;path=/'
不管當前目錄是誰統一存根目錄，這樣項目中任意位置都可以訪問這一條cookie，這就perfect 啦!
由此：我們可以封裝一個存儲cookie的方法如下：
/** 存一條cookie
* @param {string} key 要存的cookie的名稱
* @param {string} value 要存的cookie的值
* @param {object} [options] 可選參數，過期時間和目錄，如：{ path: '/', expires: 7 }存根目錄7天過期的cookie
*/
function setCookie (key, value, options) {
var str = `${key}=${encodeURIComponent(value)}`
// 先判斷options是否傳進來了
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
}
取cookie
現在我們掌握了如何存cookie，接下來看看怎么取吧
取cookie同樣使用document.cookie這個屬性：
console.log(document.cookie) // username=dary
但是如果我們在一個網站里存了多條cookie，這個時候得到的結果就是
console.log(document.cookie) // username=dary; age=18
多條cookie之間以; 隔開，注意：這里是分號和一個空格，這個對我們拆開每一條cookie非常重要。所以我們現在希望能把cookie每一條拆開，得到一個對象，這樣就可以取得某一條cookie的值了，所以我們可以封裝一個獲取cookie的方法如下：
/** 獲取某一條cookie
* @param {string} key 要獲取的cookie的名稱
* @retrun {string} 當前這條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的方式特別簡單，我們只需要把cookie的過期時間設置為已經過去了的時間就行了，這個時候瀏覽器一看，誒?這條cookie不是已經過期了么?就只能把它刪掉了 ，方法如下：
/** 刪一條cookie
* @param {string} key 要刪的cookie的名稱
* @param {path} [path] 可選參數，要刪的cookie的所在的路徑，如果就是當前路徑這個參數可以不傳
*/
function removeCookie (key, path) {
var date = new Date()
date.setDate(date.getDate() - 1) // 過期時間設置為昨天
var str = `${key}='';expires=${date.toUTCString()}`
if (path) {
str += `;path=${path}`
}
document.cookie = str
}
修改cookie
重新存一下把之前的覆蓋掉就是修改了cookie了
最后附上一個cookie方法，既可以完成存也可以取，甚至可以刪
// 通過判斷有沒有傳第二個參數value來決定是存還是取
// 這個方法也可以用域刪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]
}
}
京公網安備 11010802030320號