Javascript 简明教程
JavaScript - Cookie Attributes
Cookie Attributes
JavaScript cookie 属性用于设置 cookie 的附加信息，例如路径、域、到期日期等。在 JavaScript 中，您可以在设置新 cookie 或更新 cookie 时指定 cookie 属性。例如，您可以使用 'expires' 属性设置 cookie 的到期日期。
简单来说，cookie 属性用于控制 cookie 的行为以及在浏览器中如何使用 cookie。
此处，我们在下表中列出了所有 cookie 属性及其说明。
Attribute |
Description |
Default Value |
Name/Value |
用于将 cookie 存储在浏览器中。 |
|
Domain |
指定对其 cookie 有效的域。 |
域名的网站。例如，tutorialspoint.com |
Path |
设置 Cookie 的目录或网页的路径。 |
/ (entire domain) |
Expires |
用于指定 Cookie 应过期的日期和时间。 |
Current session |
Max-Age |
用于指定 Cookie 过期后的时限。 |
Current 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 的所有属性。浏览器设置一些属性。
Check the Attribute Value in the Browser
你可以将属性设置为 Cookie，但无法访问这些属性。要检查是否设置了该属性，可以使用浏览器控制台。
按照以下步骤在浏览器控制台中检查 Cookie。
Step 1 - 在浏览器中单击鼠标右键。它将打开菜单。你需要选择“检查”选项。它将打开开发者工具。
Step 2 - 之后，你需要转到“应用程序/存储”选项卡。
Step 3 − 在边栏中，选择“cookies”。
Step 4 − 现在，单击任何 cookie 以检查它们的名称、值和其他属性值。
上述步骤仅适用于 Chrome 网络浏览器。根据所使用的浏览器，步骤可能有所不同。
这里，你将逐个学习每个属性及其示例。
Cookie’s Name/Value Attribute
名称属性用于存储 cookie 数据。它将数据作为值。如果你想在“名称”属性的值中使用特殊字符，则需要使用 encodeURIComponent() 方法对文本进行编码。
Syntax
遵循以下语法设置 cookie 的名称属性。
let value = encodeURIComponent(cookieValue);
document.cookie = "name=" + value + ";";在上述语法中，我们使用 encodeURIComponent() 方法对“cookieValue”进行了编码，并将编码后的值用作名称属性值。
Example
在下面的代码中，我们设置了值为“false”的“已订阅”cookie。你可以单击读取 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’s Path Attribute
路径属性用于设置 cookie 的范围。它定义了应在网站上的何处访问 cookie。你可以将相对路径或绝对路径设置为路径属性值。
如果你设置相对路径，则可以在特定目录或子目录的任何地方访问所有 cookie。
Syntax
遵循以下语法在 cookie 中设置路径属性。
document.cookie = "name=value;path=pathStr";在上述语法中，你需要将“pathStr”替换为实际路径字符串。
Example
在下面的代码中，我们设置了 cookie 的路径。此处，我们设置了“/”（home 路由）。因此，可以在网站的每个网页上访问 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 Attribute
“expires”属性用于设置 cookie 的到期日期。它将日期字符串作为值。
Syntax
遵循以下语法在 cookie 中设置 expires 属性。
document.cookie = "name=value;expires=dateStr";在上述语法中，你需要将“dateStr”替换为日期字符串。
Example
在下面的代码中，我们设置了 product 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’s maxAge Attribute
“maxAge”属性是“expires”属性的替代方法。它用于指定 cookie 的生存期。它以秒为单位获取值。
当 cookie 的生命周期结束时，它将被自动删除。
Syntax
遵循以下语法将“maxAge”特性传递给 cookie。
document.cookie = "name=value;max-ge=age;";在上述语法中，您需要将“age”替换为秒数。
Example
在下面的代码中，我们将总秒数设置为 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 Attribute
域特性用于指定 cookie 所适用的域名。您所提出请求中的域的默认值。您可以设置域特性来设置子域。
Syntax
遵循以下语法在 cookie 中设置域特性的值。
document.cookie = "name=value;domain:domain_name ";在上述语法中，将“domain_name”替换为实际域名，例如 example.com。
Example
在下面的代码中，我们为 cookie 设置“tutorialspoint.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:tutorialspoint.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 的过期时间。