cookie是什么
HTTP協(xié)議本身是無(wú)狀態(tài)的,即服務(wù)器無(wú)法判斷用戶(hù)身份转培。Cookie實(shí)際上是一小段的文本信息(key-value格式)浸须。客戶(hù)端向服務(wù)器發(fā)起請(qǐng)求裂垦,如果服務(wù)器需要記錄該用戶(hù)狀態(tài)肌索,就使用response向客戶(hù)端瀏覽器頒發(fā)一個(gè)Cookie诚亚。客戶(hù)端瀏覽器會(huì)把Cookie保存起來(lái)闸准。當(dāng)瀏覽器再請(qǐng)求該網(wǎng)站時(shí)夷家,瀏覽器把請(qǐng)求的網(wǎng)址連同該Cookie一同提交給服務(wù)器或辖。服務(wù)器檢查該Cookie,以此來(lái)辨認(rèn)用戶(hù)狀態(tài)
cookie機(jī)制
當(dāng)用戶(hù)第一次訪問(wèn)并登陸一個(gè)網(wǎng)站的時(shí)候缺谴, cookie的設(shè)置以及發(fā)送會(huì)經(jīng)歷以下4個(gè)步驟:
- 客戶(hù)端發(fā)送一個(gè)請(qǐng)求到服務(wù)器
- 服務(wù)器發(fā)送一個(gè)HttpResponse響應(yīng)到客戶(hù)端湿蛔,其中包含Set-Cookie的頭部
- 客戶(hù)端保存cookie阳啥,之后向服務(wù)器發(fā)送請(qǐng)求時(shí)察迟,HttpRequest請(qǐng)求中會(huì)包含一個(gè)Cookie的頭部
- 服務(wù)器返回響應(yīng)數(shù)據(jù)
cookie屬性項(xiàng)
Expires
該屬性用來(lái)設(shè)置Cookie的有效期扎瓶。Cookie中的maxAge用來(lái)表示該屬性概荷,單位為秒误证。Cookie中通過(guò)getMaxAge()和setMaxAge(int maxAge)來(lái)讀寫(xiě)該屬性。maxAge有3種值遏考,分別為正數(shù)诈皿,負(fù)數(shù)和0。
如果maxAge屬性為正數(shù)壶冒,則表示該Cookie會(huì)在maxAge秒之后自動(dòng)失效。瀏覽器會(huì)將maxAge為正數(shù)的Cookie持久化烟零,即寫(xiě)到對(duì)應(yīng)的Cookie文件中(每個(gè)瀏覽器存儲(chǔ)的位置不一致)锨阿。無(wú)論客戶(hù)關(guān)閉了瀏覽器還是電腦墅诡,只要還在maxAge秒之前末早,登錄網(wǎng)站時(shí)該Cookie仍然有效。當(dāng)maxAge屬性為負(fù)數(shù)说庭,則表示該Cookie只是一個(gè)臨時(shí)Cookie然磷,不會(huì)被持久化,僅在本瀏覽器窗口或者本窗口打開(kāi)的子窗口中有效刊驴,關(guān)閉瀏覽器后該Cookie立即失效
cookie的域名
Cookie是不可以跨域名的姿搜,隱私安全機(jī)制禁止網(wǎng)站非法獲取其他網(wǎng)站的Cookie
cookie的路徑
path屬性決定允許訪問(wèn)Cookie的路徑。比如捆憎,設(shè)置為"/"表示允許所有路徑都可以使用Cookie
cookie的前端設(shè)置舅柜、獲取與刪除
let cookie = {
/**
* 設(shè)置cookie方法
* @param key{string} cookie名稱(chēng)
* @param val{string} cookie值
* @param hours{number} 過(guò)期時(shí)間(小時(shí))
*/
set: function (key, val, hours) {
let date = new Date(); //獲取當(dāng)前時(shí)間
let expiresHours = parseInt(hours); //將date設(shè)置為n小時(shí)以后的時(shí)間
date.setTime(date.getTime() + expiresHours * 24 * 3600 * 1000); //格式化為cookie識(shí)別的時(shí)間
document.cookie = key + "=" + val + ";expires=" + date.toGMTString(); //設(shè)置cookie
},
/**
* 移除cookie方法
* @param key{string} cookie名稱(chēng)
*/
remove: function (key) {
this.set(key, "", 0)
},
/**
* 獲取cookie方法
* @param key{string} cookie名稱(chēng)
* @returns {string} 對(duì)應(yīng)名稱(chēng)的cookie值
*/
get: function (key) {//獲取cookie方法
/*獲取cookie參數(shù)*/
let getCookie = document.cookie.replace(/[ ]/g, ""); //獲取cookie,并且將獲得的cookie格式化攻礼,去掉空格字符
let arrCookie = getCookie.split(";") //將獲得的cookie以"分號(hào)"為標(biāo)識(shí) 將cookie保存到arrCookie的數(shù)組中
let tips = ""; //聲明變量tips
for (let i = 0; i < arrCookie.length; i++) { //使用for循環(huán)查找cookie中的tips變量
let arr = arrCookie[i].split("="); //將單條cookie用"等號(hào)"為標(biāo)識(shí)业踢,將單條cookie保存為arr數(shù)組
if (key === arr[0]) { //匹配變量名稱(chēng),其中arr[0]是指的cookie名稱(chēng)礁扮,如果該條變量為tips則執(zhí)行判斷語(yǔ)句中的賦值操作
tips = arr[1]; //將cookie的值賦給變量tips
break; //終止for循環(huán)遍歷
}
}
return tips;
}
}