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