概要

“cookie 是存儲(chǔ)于訪問(wèn)者的計(jì)算機(jī)中的變量。每當(dāng)同一臺(tái)計(jì)算機(jī)通過(guò)瀏覽器請(qǐng)求某個(gè)頁(yè)面時(shí)，就會(huì)發(fā)送這個(gè) cookie。你可以使用 JavaScript 來(lái)創(chuàng)建和取回 cookie 的值。” - w3school

從JavaScript的角度看，cookie 就是一些字符串信息。這些信息存放在客戶端的計(jì)算機(jī)中，用于客戶端計(jì)算機(jī)與服務(wù)器之間傳遞信息。在JavaScript中可以通過(guò) document.cookie 來(lái)讀取或設(shè)置這些信息。由于cookie 多用在客戶端和服務(wù)端之間進(jìn)行通信，所以除了JavaScript以外，服務(wù)端的語(yǔ)言也可以存取cookie。

一、設(shè)置cookie

在JavaScript 中，可以通過(guò)document.cookie屬性來(lái)創(chuàng)建、讀取、修改和刪除 cookie信息

設(shè)置一個(gè)cookie 信息，[document.cookie=“name=value”]需要以name=value形式的字符串來(lái)定義需要注意，一次只能設(shè)置一個(gè)名/值對(duì)

document.cookie = "name=張三";

cookie 存儲(chǔ)時(shí)值不能是用分號(hào)（;）、逗號(hào)（,）、等號(hào)（=）以及空格，因?yàn)檫@些特殊符號(hào)是cookie的標(biāo)識(shí)符,用于標(biāo)識(shí)和設(shè)置cookie的存儲(chǔ)格式，所以：

• 在儲(chǔ)到cookie 時(shí)，可以使用 js內(nèi)置的 encodeURIComponent() 函數(shù)對(duì)數(shù)據(jù)進(jìn)行編碼
• 在讀取cookie 時(shí)，可以使用 js內(nèi)置的 decodeURIComponent() 函數(shù)對(duì)數(shù)據(jù)進(jìn)行解碼

document.cookie = "url=https://www.baidu.com/;?id=123";
//https://www.baidu.com/  實(shí)際存儲(chǔ)

document.cookie = "url=" + encodeURIComponent("https://www.baidu.com/;?id=123");

1.給cookie設(shè)置過(guò)期時(shí)間

默認(rèn)情況下，cookie是會(huì)話級(jí)別的，也就是說(shuō)，它們將在用戶關(guān)閉瀏覽器時(shí)刪除。但是在實(shí)際開(kāi)發(fā)中，cookie常常需要長(zhǎng)期保存，可以通過(guò)設(shè)置cookie的過(guò)期時(shí)間來(lái)使其在一定時(shí)間內(nèi)保持有效。以下是一個(gè)將cookie的過(guò)期時(shí)間設(shè)置為一天的示例：

const expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 1);
document.cookie = `username=John; expires=${expirationDate.toUTCString()}`;

2.指定可訪問(wèn)cookie的路徑

在設(shè)置Cookie時(shí)，可以使用path參數(shù)來(lái)指定可訪問(wèn)該cookie的路徑。path參數(shù)用于限制cookie在哪個(gè)路徑下有效。只有與指定路徑匹配的URL才能訪問(wèn)該Cookie。

以下是設(shè)置Cookie時(shí)指定路徑的示例：

document.cookie = "username=John; path=/example";

在上面的示例中，將"username"的cookie設(shè)置為只能在以/example開(kāi)頭的URL路徑下訪問(wèn)。比如，只有/example、/example/page1、/example/page2等路徑下的頁(yè)面才能讀取這個(gè)cookie。

默認(rèn)情況下，如果不指定path參數(shù)，cookie的默認(rèn)路徑是設(shè)置cookie的頁(yè)面所在的路徑。例如，如果在http://example.com/login頁(yè)面設(shè)置了一個(gè)Cookie，則該Cookie的默認(rèn)路徑為/login。

需要注意的是，每個(gè)路徑都是一個(gè)獨(dú)立的上下文，cookie只能在其設(shè)置的路徑及其子路徑下訪問(wèn)。如果路徑設(shè)置不正確，可能導(dǎo)致cookie無(wú)法在預(yù)期的頁(yè)面訪問(wèn)或被刪除。

因此，在設(shè)置Cookie時(shí)，根據(jù)實(shí)際需求合理指定path參數(shù)，以確保cookie在預(yù)期的路徑下有效。

3.指定可訪問(wèn)cookie的主機(jī)名

在設(shè)置cookie時(shí)，可以使用domain參數(shù)來(lái)指定可訪問(wèn)該cookie的主機(jī)名。domain參數(shù)用于限制cookie在哪個(gè)主機(jī)名下有效。只有與指定主機(jī)名匹配的URL才能訪問(wèn)該cookie。

以下是設(shè)置cookie時(shí)指定主機(jī)名的示例：

document.cookie = "username=John; domain=example.com";

在上面的示例中，將"username"的cookie設(shè)置為只能在example.com主機(jī)名下的所有URL訪問(wèn)。這意味著，只有example.com以及其子域名（如subdomain.example.com）下的頁(yè)面才能讀取這個(gè)Cookie。
默認(rèn)情況下，如果不指定domain參數(shù)，cookie的默認(rèn)主機(jī)名是設(shè)置Cookie的頁(yè)面所屬的主機(jī)名。例如，在http://example.com/login頁(yè)面設(shè)置了一個(gè)cookie，則該Cookie的默認(rèn)主機(jī)名為example.com。

需要注意的是，通過(guò)指定domain參數(shù)來(lái)限制cookie的主機(jī)名時(shí)，需要遵循一些規(guī)則：

• 主機(jī)名必須具有兩個(gè)或更多的域名部分。例如，example.com是有效的，但.com或localhost是無(wú)效的。
• 主機(jī)名的設(shè)置僅適用于子域名，而無(wú)法在父域名下設(shè)置cookie。

因此，在設(shè)置cookie時(shí)，根據(jù)實(shí)際需求合理指定domain參數(shù)，以確保cookie在預(yù)期的主機(jī)名下有效。

二、讀取cookie

需要在服務(wù)器環(huán)境下讀?。ǐ@?。?cookie 同樣使用document.cookie即可，該屬性會(huì)返回一個(gè)字符串，字符串中包含除 max-age、expires、path 和 domain 等屬性之外的所有 cookie 信息

讀取cookie 的值，它會(huì)返回一個(gè)以分號(hào)分隔的鍵值對(duì)字符串，包含當(dāng)前在瀏覽器中存儲(chǔ)的所有cookie 。要獲取特定cookie 的值，需要解析該字符串。

為了獲取單個(gè) cookie 的值，我們可以通過(guò) split() 函數(shù)將包含 cookie 信息的字符串拆分為數(shù)組，然后再獲取某個(gè) cookie 的值，
以下是一個(gè)獲取名為"username"的Cookie值的示例：

function getCookie(name) {
  const cookieString = document.cookie;
  const cookies = cookieString.split('; ');
  for (const cookie of cookies) {
    const [cookieName, cookieValue] = cookie.split('=');
    if (cookieName === name) {
      return cookieValue;
    }
  }
  return null;
}

const username = getCookie('username');

也可以通過(guò)正則表達(dá)式

document.cookie = "name=張三";
let cookie = document.cookie;
let key ='name'
let reg = new RegExp("(^|\\s)"+ key +"=([^;]+)(;|$)");
console.log(cookie.match(reg)[2])

三、刪除cookie

刪除 cookie 與修改 cookie 類似，只需要重新將 cookie 的值設(shè)置為空，并將 expires 屬性設(shè)置為一個(gè)過(guò)去的日期即可
以下是一個(gè)刪除名為"username"的cookie 的示例：

const expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() - 1);
document.cookie = 'username=; expires=${expirationDate.toUTCString()}';

需要注意的是，cookie 存儲(chǔ)在瀏覽器中，可以被用戶修改或刪除。cookie 還有一些限制，例如每個(gè)域名下的cookie數(shù)量和存儲(chǔ)大小都有限制。
在實(shí)際開(kāi)發(fā)中，除了使用原生JavaScript操作cookie ，還可以使用現(xiàn)代JavaScript框架和庫(kù)提供的cookie 管理工具，如js-cookie、universal-cookie等，以簡(jiǎn)化cookie 的操作和管理。

四、 封裝構(gòu)造通用的cookie處理函數(shù)

cookie的處理過(guò)程比較復(fù)雜，并具有一定的相似性。因此可以定義幾個(gè)函數(shù)來(lái)完成cookie的通用操作，從而實(shí)現(xiàn)代碼的復(fù)用。下面列出了常用的cookie操作及其函數(shù)實(shí)現(xiàn)。

//設(shè)置cookie
function setCookie(obj,time){
	let date = new Date(new Date().getTime()+ time*24*60*60*1000).toUTCString();
	for(let key in obj){
		document.cookie = key+"="+obj[key]+"; expires="+ date;
	}
},


//讀取cookie
function getCookie(key){
	return document.cookie.match( new RegExp("(^|\\s)"+ key +"=([^;]+)(;|$)"))[2]
},


//刪除cookie
function removeCookie(key){
	setCookie({[key]: "" }, -1)
}

總結(jié) 

到此這篇關(guān)于JS cookie的設(shè)置、讀取和刪除方法的文章就介紹到這了,更多相關(guān)JS cookie設(shè)置、讀取和刪除內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論