前言

在前端開(kāi)發(fā)中，Cookie 是一種常用的客戶端存儲(chǔ)機(jī)制，它允許服務(wù)器在客戶端存儲(chǔ)少量的數(shù)據(jù)，并在后續(xù)的請(qǐng)求中讀取這些數(shù)據(jù)。Cookie 主要用于保持用戶會(huì)話狀態(tài)、個(gè)性化設(shè)置、跟蹤用戶行為等。前端使用 Cookie 主要有兩種方式：通過(guò)瀏覽器自動(dòng)管理（隱式使用）和通過(guò) JavaScript 顯式操作。下面將詳細(xì)講解這兩種方式。

一、通過(guò)瀏覽器自動(dòng)管理（隱式使用）

這種方式下，開(kāi)發(fā)者不需要直接操作 Cookie，而是依賴于瀏覽器在 HTTP 請(qǐng)求和響應(yīng)中自動(dòng)添加和管理 Cookie。

1. 服務(wù)器設(shè)置 Cookie

服務(wù)器通過(guò) HTTP 響應(yīng)頭中的 Set-Cookie 字段來(lái)設(shè)置 Cookie。例如，一個(gè)典型的 HTTP 響應(yīng)頭可能包含以下設(shè)置 Cookie 的指令：

Set-Cookie: sessionid=abc123; Path=/; Secure; HttpOnly

這里，sessionid 是 Cookie 的名稱，abc123 是其值。Path 指定了 Cookie 的作用路徑，Secure 表示 Cookie 僅在 HTTPS 請(qǐng)求中發(fā)送，HttpOnly 表示 Cookie 只能通過(guò) HTTP 協(xié)議訪問(wèn)，而不能通過(guò) JavaScript 訪問(wèn)，從而增加了安全性。

2. 瀏覽器存儲(chǔ)和發(fā)送 Cookie

一旦服務(wù)器設(shè)置了 Cookie，瀏覽器就會(huì)在用戶的計(jì)算機(jī)上存儲(chǔ)這個(gè) Cookie，并在后續(xù)向相同域（或子域）發(fā)送請(qǐng)求時(shí)自動(dòng)包含這個(gè) Cookie。例如，當(dāng)用戶再次訪問(wèn)該網(wǎng)站時(shí)，瀏覽器會(huì)在 HTTP 請(qǐng)求頭中包含以下字段：

Cookie: sessionid=abc123

這樣，服務(wù)器就可以通過(guò)讀取這個(gè) Cookie 來(lái)識(shí)別用戶的會(huì)話狀態(tài)。

二、通過(guò) JavaScript 顯式操作

雖然瀏覽器會(huì)自動(dòng)管理大部分 Cookie，但有時(shí)開(kāi)發(fā)者需要通過(guò) JavaScript 顯式地讀取、修改或刪除 Cookie。這通常用于需要在客戶端動(dòng)態(tài)處理 Cookie 數(shù)據(jù)的場(chǎng)景。

1. 讀取 Cookie

JavaScript 不能直接訪問(wèn)帶有 HttpOnly 屬性的 Cookie，但對(duì)于其他 Cookie，可以通過(guò) document.cookie 屬性來(lái)讀取。需要注意的是，document.cookie 返回的是一個(gè)包含所有 Cookie 的字符串，每個(gè) Cookie 之間用分號(hào)和空格分隔，形如：

"sessionid=abc123; userid=xyz789"

要讀取特定的 Cookie，需要手動(dòng)解析這個(gè)字符串。例如：

function getCookie(name) {
    let matches = document.cookie.match(new RegExp(
        "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ));
    return matches ? decodeURIComponent(matches[1]) : undefined;
}

let sessionid = getCookie('sessionid');
console.log(sessionid); // 輸出: abc123

2. 設(shè)置 Cookie

通過(guò) JavaScript 設(shè)置 Cookie 通常是通過(guò)直接修改 document.cookie 屬性來(lái)實(shí)現(xiàn)的。例如：

document.cookie = "userid=xyz789; Path=/; Secure; Expires=Wed, 09 Jun 2021 10:18:14 GMT";

這里，userid 是 Cookie 的名稱，xyz789 是其值。Path 指定了 Cookie 的作用路徑，Secure 表示僅通過(guò) HTTPS 發(fā)送，Expires 設(shè)置了 Cookie 的過(guò)期時(shí)間。如果不設(shè)置 Expires 或 Max-Age，則 Cookie 會(huì)成為會(huì)話 Cookie，在瀏覽器關(guān)閉時(shí)自動(dòng)刪除。

3. 刪除 Cookie

刪除 Cookie 的方法是將該 Cookie 的過(guò)期時(shí)間設(shè)置為一個(gè)過(guò)去的日期。例如：

document.cookie = "userid=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT";

這里，通過(guò)將 userid Cookie 的值設(shè)置為空字符串，并將其過(guò)期時(shí)間設(shè)置為一個(gè)遙遠(yuǎn)的過(guò)去，瀏覽器會(huì)刪除這個(gè) Cookie。

附：封裝自己Cookie的增刪改查函數(shù)

/*
	2017/02/20
	cookie操作
 */
function setCookie(key, value, iDay) {
	var oDate = new Date();
	oDate.setDate(oDate.getDate() + iDay);
	document.cookie = key + '=' + value + ';expires=' + oDate;

}
function removeCookie(key) {
	setCookie(key, '', -1);//這里只需要把Cookie保質(zhì)期退回一天便可以刪除
}
function getCookie(key) {
	var cookieArr = document.cookie.split('; ');
	for(var i = 0; i < cookieArr.length; i++) {
		var arr = cookieArr[i].split('=');
		if(arr[0] === key) {
			return arr[1];
		}
	}
	return false;
}

總結(jié)

前端使用 Cookie 的兩種方式各有優(yōu)缺點(diǎn)。通過(guò)瀏覽器自動(dòng)管理 Cookie，開(kāi)發(fā)者無(wú)需編寫額外的代碼，但需要依賴服務(wù)器的正確配置。通過(guò) JavaScript 顯式操作 Cookie，開(kāi)發(fā)者可以更靈活地控制 Cookie 的讀寫和刪除，但需要手動(dòng)處理字符串解析和設(shè)置，且需要注意安全性問(wèn)題（如避免跨站腳本攻擊）。在實(shí)際開(kāi)發(fā)中，應(yīng)根據(jù)具體需求選擇適合的方式，并遵循最佳實(shí)踐來(lái)確保 Cookie 的安全性和隱私性。

到此這篇關(guān)于前端使用cookie的兩種方式的文章就介紹到這了,更多相關(guān)前端使用cookie方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論