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