JavaScript 中的 Cookie 属性用于设置关于 Cookie 的附加信息，如路径、域名、过期日期等。在 JavaScript 中，您可以在设置新 Cookie 或更新 Cookie 时指定 Cookie 属性。例如，您可以使用 'expires' 属性设置 Cookie 的过期日期。
简单来说，Cookie 属性用来控制 Cookie 的行为以及 Cookie 在浏览器中的使用方式。
下面的表格列出了所有 Cookie 属性及其描述。
| 属性 |
描述 |
默认值 |
| 名称/值 |
用于在浏览器中存储 Cookie 数据。 |
|
| 域名 |
指定 Cookie 有效的域名。 |
网站的域名，例如 tutorialspoint.com |
| 路径 |
设置放置 Cookie 的目录或网页路径。 |
/ (整个域名) |
| 过期 |
用于指定 Cookie 应该过期的日期和时间。 |
当前会话 |
| Max-Age |
用于指定 Cookie 过期的时间限制（秒）。 |
当前会话 |
| Secure |
如果此字段包含单词 "secure"，则仅可通过安全服务器检索 Cookie。若字段为空，则无此类限制。 |
false |
| HttpOnly |
防止通过 JavaScript 访问 Cookie，以保护 Cookie 安全。 |
false |
| SameSite |
用于指定如何处理第三方 Cookie。 |
Lax |
| 优先级 |
定义 Cookie 的优先级。 |
1000 |
| 站点/服务 |
获取有关 Cookie 来源站点的信息。 |
|
| SourcePort |
获取 Cookie 来源的端口。 |
|
| 存储分区 |
定义用于存储 Cookie 的存储分区。 |
|
| 大小 |
表示 Cookie 的大小。 |
大小取决于文本长度。 |
以上所有属性都是可选的。
此外，并非所有 Cookie 属性都可以被操控。某些属性由浏览器设定。
在浏览器中检查属性值
您可以设置 Cookie 的属性，但不能直接访问这些属性。要检查属性是否已设置，可以使用浏览器控制台。
按照以下步骤在浏览器控制台中检查 Cookie：
步骤 1 - 在浏览器中右键点击。将打开菜单。您需要选择 'inspect' 选项。这将打开开发者工具。
步骤 2 - 接下来，需要转到 Application/Storage 标签页。
步骤 3 - 在侧边栏中选择 'Cookies’。
步骤 4 - 现在点击任何 Cookie 查看其名称、值及其他属性值。
以上步骤仅适用于 Chrome 浏览器。具体步骤可能根据您使用的浏览器有所不同。
下面将逐一介绍每个属性，并提供示例。
Cookie 的名称/值属性
名称属性用于存储 Cookie 数据。它接受数据作为值。如果您想在 '名称' 属性的值中使用特殊字符，需要使用 encodeURIComponent() 方法对文本进行编码。
语法
按照以下语法设置 Cookie 的名称属性：
let value = encodeURIComponent(cookieValue);
document.cookie = "name=" + value + ";";
在上述语法中，我们使用 encodeURIComponent() 方法编码了 cookieValue 并使用编码后的值作为名称属性值。
示例
在下面的代码中，我们设置了 'subscribed' Cookie，值为 'false'。您可以点击 “读取 Cookies” 按钮来获取 Cookies。
<html>
<body>
<p id="output"> </p>
<button onclick="setCookies()"> 设置 Cookie </button> <br> <br>
<button onclick="readCookies()"> 读取 Cookies </button>
<script>
let output = document.getElementById("output");
function setCookies() {
document.cookie = "subscribed=false";
output.innerHTML = "Cookie 设置成功！";
}
function readCookies() {
const allCookies = document.cookie.split("; ");
output.innerHTML = "subscribed Cookie 是 - <br>";
for (const cookie of allCookies) {
const [name, value] = cookie.split("=");
if (name == "subscribed") {
output.innerHTML += `${name} : ${decodeURIComponent(value)} <br>`;
}
}
}
</script>
</body>
</html>
Cookie 的路径属性
路径属性用于设置 Cookie 的范围。它定义了 Cookie 在网站上的可访问位置。您可以设置相对或绝对路径作为路径属性值。
如果您设置了相对路径，则所有 Cookie 在特定目录或子目录中都可访问。
语法
按照以下语法在 Cookie 中设置路径属性：
document.cookie = "name=value;path=pathStr";
在上述语法中，您需要用实际的路径字符串替换 'pathStr'。
示例
在下面的代码中，我们为 Cookie 设置了路径。这里，我们设置的是 ‘/’（首页）。因此，Cookie 可在整个网站的每个网页上访问。您可以尝试在网站的不同网页上获取 Cookie。
<html>
<body>
<button onclick="setCookies()"> 设置 Cookie </button>
<p id="output"> </p>
<button onclick="readCookies()"> 读取 Cookies </button>
<script>
let output = document.getElementById("output");
function setCookies() {
document.cookie = "signIn=true; path=/";
output.innerHTML = "Cookie 设置成功！";
}
function readCookies() {
const allCookies = document.cookie.split("; ");
output.innerHTML = "Cookie 是 : <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' 属性用于设置 Cookie 的过期日期。它接受日期字符串作为值。
如果您将 0 或过去日期设置为 'expires' 的值，浏览器将自动删除 Cookie。
语法
按照以下语法在 Cookie 中设置过期属性：
document.cookie = "name=value;expires=dateStr";
在上述语法中，您需要用日期字符串替换 'dateStr'。
示例
在下面的代码中，我们设置了产品 Cookie，并且设置了过期日期为 2050 年。
您可以尝试设置过去的过期日期并尝试访问 Cookie。您将找不到该 Cookie。
<html>
<body>
<p id="output"> </p>
<button onclick="setCookies()"> 设置 Cookie </button> <br> <br>
<button onclick="readCookies()"> 读取 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 设置成功！";
}
function readCookies() {
const allCookies = document.cookie.split("; ");
output.innerHTML = "Cookie 是 : <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 的生命周期结束时，它将自动删除。
语法
按照以下语法向 Cookie 传递 'maxAge' 属性：
document.cookie = "name=value;max-age=age;";
在上述语法中，您需要用秒数替换 'age'。
示例
在下面的代码中，我们将总秒数等于 10 天作为 'maxAge' 属性的值。您可以将 Cookie 的生命周期设置为 1 秒，并在 1 秒后尝试访问 Cookie。
<html>
<body>
<button onclick="setCookies()"> 设置 Cookie </button>
<button onclick="readCookies()"> 读取 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 = "Cookie 是 : <br>";
for (const cookie of allCookies) {
const [key, value] = cookie.split("=");
if (key == "token") {
output.innerHTML += `${key} : ${decodeURIComponent(value)} <br>`;
}
}
}
</script>
</body>
</html>
Cookie 的域名属性
域名属性用于指定 Cookie 有效的域名。默认值是从您发出请求的域名。您可以通过设置域名属性来指定子域。
语法
按照以下语法在 Cookie 中设置域名属性的值：
document.cookie = "name=value;domain:domain_name ";
在上述语法中，用实际的域名（如 example.com）替换 'domain_name'。
示例
在下面的代码中，我们为 Cookie 设置了 'tutorialspoint.com' 域名。
<html>
<body>
<p id="output"> </p>
<button onclick="setCookies()"> 设置 Cookie </button>
<button onclick="readCookies()"> 读取 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 = "Cookie 是 : <br>";
for (const cookie of allCookies) {
const [key, value] = cookie.split("=");
if (key == "username") {
output.innerHTML += `${key} : ${decodeURIComponent(value)} <br>`;
}
}
}
</script>
</body>
</html>
同样地，您也可以更新属性值。例如，您可以延长 Cookie 的过期时间。