前言

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

一、通過瀏覽器自動管理（隱式使用）

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

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

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

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

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

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

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

Cookie: sessionid=abc123

這樣，服務(wù)器就可以通過讀取這個 Cookie 來識別用戶的會話狀態(tài)。

二、通過 JavaScript 顯式操作

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

1. 讀取 Cookie

JavaScript 不能直接訪問帶有 HttpOnly 屬性的 Cookie，但對于其他 Cookie，可以通過 document.cookie 屬性來讀取。需要注意的是，document.cookie 返回的是一個包含所有 Cookie 的字符串，每個 Cookie 之間用分號和空格分隔，形如：

"sessionid=abc123; userid=xyz789"

要讀取特定的 Cookie，需要手動解析這個字符串。例如：

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

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

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

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

3. 刪除 Cookie

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

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

這里，通過將 userid Cookie 的值設(shè)置為空字符串，并將其過期時間設(shè)置為一個遙遠的過去，瀏覽器會刪除這個 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)缺點。通過瀏覽器自動管理 Cookie，開發(fā)者無需編寫額外的代碼，但需要依賴服務(wù)器的正確配置。通過 JavaScript 顯式操作 Cookie，開發(fā)者可以更靈活地控制 Cookie 的讀寫和刪除，但需要手動處理字符串解析和設(shè)置，且需要注意安全性問題（如避免跨站腳本攻擊）。在實際開發(fā)中，應(yīng)根據(jù)具體需求選擇適合的方式，并遵循最佳實踐來確保 Cookie 的安全性和隱私性。

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

最新評論