JavaScript - Cookie 属性

Cookie 属性

JavaScript Cookie 属性用于设置有关 Cookie 的其他信息，例如路径、域、到期日期等。在 JavaScript 中，您可以在设置新 Cookie 或更新 Cookie 时指定 Cookie 属性。例如，您可以使用 'expires' 属性设置 cookie 的到期日期。

简单来说，cookie 属性用于控制 cookie 的行为以及 cookie 在浏览器中的使用方式。

在这里，我们在下表中列出了所有 cookie 属性及其描述。

属性	描述	默认值
Name/Value	用于在浏览器中存储 cookie。
Domain	指定其 Cookie 有效的域。	网站域名. For example, qikepu.com
Path	设置 Cookie 的目录或网页的路径。	/ (整个域)
Expires	用于指定 Cookie 过期的日期和时间。	当前 session
Max-Age	用于指定 cookie 过期后的时间限制。	当前 session
Secure	如果此字段包含“secure”一词，则只能使用安全服务器检索 cookie。如果此字段为空，则不存在此类限制。	false
HttpOnly	阻止通过 JavaScript 访问 cookie，以确保 cookie 安全。	false
SameSite	用于指定应如何处理第三方 Cookie。	Lax
Priority	定义了 Cookie 的优先级。	1000
Site/Service	获取有关 Cookie 的源站点的信息。
SourcePort	获取 Cookie 源的端口。
StoragePartition	定义用于存储 Cookie 的存储分区。
Size	表示 Cookie 的大小。	大小取决于文本长度。

但是，最重要的是，属性是可选的。

此外，您无法操作 Cookie 的所有属性。浏览器设置一些属性。

在浏览器中检查属性值

您可以设置 Cookie 的属性，但无法访问这些属性。要检查是否设置了该属性，您可以使用浏览器控制台。

请按照以下步骤在浏览器控制台中检查 Cookie。

第 1 步 - 在浏览器中右键单击。它将打开菜单。您需要选择 'inspect' 选项。它将打开开发人员工具。

第 2 步 - 之后，您需要转到应用程序/存储标签。

第 3 步 - 在侧边栏中，选择“cookie”。

第 4 步 - 现在，单击任何 cookie 以检查其名称、值和其他属性值。

以上步骤仅适用于 Chrome Web 浏览器。该步骤可能因您使用的浏览器而异。

在这里，您将通过示例一一学习每个属性。

Cookie 的 name/value 属性

Name 属性用于存储 Cookie 数据。它将数据作为值。如果要在 'Name' 属性的值中使用特殊字符，则需要使用 encodeURIComponent（）方法对文本进行编码。

语法

按照以下语法设置 Cookie 的 Name 属性。

let value = encodeURIComponent(cookieValue);
document.cookie = "name=" + value + ";";

在上面的语法中，我们使用 encodeURIComponent（）方法对 'cookieValue' 进行编码，并将编码后的值用作 name 属性值。

例

在下面的代码中，我们将 'subscribed' cookie 设置为 'false' 值。您可以单击读取 cookie 按钮来获取 cookie。

<html>
<body>
		 	<p id = "output"> </p>
		 	<button onclick = "setCookies()"> Set Cookie </button> <br> <br>
		 	<button onclick = "readCookies()"> Read Cookies </button>
		 	<script>
		 			 	let output = document.getElementById("output");
		 			 	function setCookies() {
		 			 			 	document.cookie = "subscribed=false"; // name-value pair
		 			 			 	output.innerHTML = "Cookie setting successful!";
		 			 	}
		 			 	function readCookies() {
		 			 			 	const allCookies = document.cookie.split("; ");
		 			 			 	output.innerHTML = "The subscribed cookie is - <br>";
		 			 			 	for (const cookie of allCookies) {
		 			 			 			 	const [name, value] = cookie.split("=");
		 			 			 			 	if (name == "subscribed") {
		 			 			 			 			 	output.innerHTML += `${name} : ${decodeURIComponent(value)} <br>`;
		 			 			 			 	}
		 			 			 	}
		 			 	}
		 	</script>
	 </body>
</html>

Cookie 的 path 属性

该 Path 属性用于设置 Cookie 的范围。它定义了在网站上应访问 Cookie 的位置。您可以将相对路径或绝对路径设置为 Path 属性值。

如果设置了相对路径，则所有 cookie 都可以在 particular 或 sub-directory 中的任何位置访问。

语法

按照以下语法在 Cookie 中设置 Path 属性。

 document.cookie = "name=value;path=pathStr";

在上面的语法中，你需要将 'pathStr' 替换为实际的 path string。

例

在下面的代码中，我们设置了 cookie 的路径。在这里，我们设置 '/' （home route）。因此，可以在网站的每个网页上访问 cookie。您可以尝试在网站的不同网页上获取 cookie。

<html>
<body>
		 	<button onclick = "setCookies()"> Set Cookie </button>
		 	<p id = "output"> </p>
		 	<button onclick = "readCookies()"> Read Cookies </button>
		 	<script>
		 			 	let output = document.getElementById("output");
		 			 	function setCookies() {
		 			 			 	document.cookie = "signIn=true; path=/";
		 			 			 	output.innerHTML = "Cookie set successful!";	
		 			 	}
		 			 	function readCookies() {
		 			 			 	const allCookies = document.cookie.split("; ");
		 			 			 	output.innerHTML = "The cookie is : <br>";
		 			 			 	for (const cookie of allCookies) {
		 			 			 			 	const [key, value] = cookie.split("=");
		 			 			 			 	if (key == "signIn") {
		 			 			 			 			 	output.innerHTML += `${key} : ${decodeURIComponent(value)} <br>`;
		 			 			 			 	}
		 			 			 	}
		 			 	}
		 	</script>
</body>
</html>

Cookie Expires 属性

'expires' 属性用于设置 cookie 的到期日期。它将日期字符串作为值。

如果您将 0 或过去的日期设置为“过期”的值，浏览器将自动删除 Cookie。

语法

按照以下语法在 Cookie 中设置 expires 属性。

 document.cookie = "name=value;expires=dateStr";

在上面的语法中，你需要将 'dateStr' 替换为日期字符串。

例

在下面的代码中，我们设置了产品 Cookie。此外，我们将到期日期设置为 2050 年。

您可以尝试设置过去的到期日期并尝试访问 cookie。您将无法找到 Cookie。

<html>
<body>
		 	<p id = "output"> </p>
		 	<button onclick = "setCookies()"> Set Cookie </button> <br> <br>
		 	<button onclick = "readCookies()"> Read Cookies </button>
		 	<script>
		 			 	let output = document.getElementById("output");
		 			 	function setCookies() {
		 			 			 	document.cookie = "product=mobile;expires=12 Jan 2050 12:00:00 UTC";
		 			 			 	output.innerHTML = "Cookie Set Successful!";
		 			 	}
		 			 	function readCookies() {
		 			 			 	const allCookies = document.cookie.split("; ");
		 			 			 	output.innerHTML = "The cookie is : <br>";
		 			 			 	for (const cookie of allCookies) {
		 			 			 			 	const [key, value] = cookie.split("=");
		 			 			 			 	if (key == "product") {
		 			 			 			 			 	output.innerHTML += `${key} : ${decodeURIComponent(value)} <br>`;
		 			 			 			 	}
		 			 			 	}
		 			 	}
		 	</script>
</body>
</html>

Cookie 的 maxAge 属性

'maxAge' 属性是 'expires' 属性的替代项。它用于指定 Cookie 的生命周期。它将秒数作为值。

当 cookie 的生命周期结束时，它将自动被删除。

语法

按照以下语法将 'maxAge' 属性传递给 Cookie。

 document.cookie = "name=value;max-ge=age;";

在上面的语法中，您需要将 'age' 替换为秒数。

例

在下面的代码中，我们将等于 10 天的总秒数设置为 maxAge 属性的值。您可以为 Cookie 设置 1 秒的生命周期，并在 1 秒后尝试访问 Cookie。

<html>
<body>
		 	<button onclick = "setCookies()"> Set Cookie </button>
		 	<button onclick = "readCookies()"> Read Cookies </button>
		 	<p id = "output"> </p>
		 	<script>
		 			 	const output = document.getElementById("output");
		 			 	function setCookies() {
		 			 			 	document.cookie = "token=1234wfijdn;max-age=864000";
		 			 	}
		 			 	function readCookies() {
		 			 			 	const allCookies = document.cookie.split("; ");
		 			 			 	output.innerHTML = "The cookie is : <br>";
		 			 			 	for (const cookie of allCookies) {
		 			 			 			 	const [key, value] = cookie.split("=");
		 			 			 			 	if (key == "token") {
		 			 			 			 			 	output.innerHTML += `${key} : ${decodeURIComponent(value)} <br>`;
		 			 			 			 	}
		 			 			 	}
		 			 	}
		 	</script>
</body>
</html>

Cookie 域属性

domain 属性用于指定 Cookie 有效的域。要从中发出请求的域的默认值。您可以设置 domain 属性来设置子域。

语法

按照以下语法在 Cookie 中设置 domain 属性的值。

 document.cookie = "name=value;domain:domain_name ";

在上述语法中，将 'domain_name' 替换为实际的域，例如 example.com。

例

在下面的代码中，我们为 cookie 设置了 'qikepu.com' 域。

<html>
<body>
		 	<p id = "output"> </p>
		 	<button onclick = "setCookies()"> Set Cookie </button>
		 	<button onclick = "readCookies()"> Read Cookies </button>
		 	<script>
		 			 	const output = document.getElementById("output");
		 			 	function setCookies() {
		 			 			 	document.cookie = "username=abcd;domain:qikepu.com";
		 			 	}
		 			 	function readCookies() {
		 			 			 	const allCookies = document.cookie.split("; ");
		 			 			 	output.innerHTML = "The cookie is : <br>";
		 			 			 	for (const cookie of allCookies) {
		 			 			 			 	const [key, value] = cookie.split("=");
		 			 			 			 	if (key == "username") {
		 			 			 			 			 	output.innerHTML += `${key} : ${decodeURIComponent(value)} <br>`;
		 			 			 			 	}
		 			 			 	}
		 			 	}
		 	</script>
</body>
</html>

同样，您也可以更新属性值。例如，您可以延长 Cookie 的有效期。

<< JavaScript - Cookies JavaScript - 删除 Cookie >>