JavaScript 通过其内置的 document.cookie 接口进行 Cookie 操作、设定 Cookie 值、获取 Cookie 列表 以及 删除 Cookie 。具体而言，JavaScript 可以使用 document.cookie 载入当前域下的所有 Cookie 作为一个字符串，通过字符串操作可以提取或设定特定的 Cookie 值。进一步控制包括设置 Cookie 的失效日期、路径、域和安全性等。值得详细描述的是，JavaScript 设定 Cookie 时，需要遵循安全最佳实践，如设置 Secure 标记以确保 Cookie 仅通过 HTTPS 协议传输，进而减少中间人攻击的风险。
一、基本操作
在使用 JavaScript 对 Cookie 进行操作前，需要理解 Cookie 的构成。一个 Cookie 一般包括名称、值、过期时间、路径和域名。
创建和更新 Cookie
要创建或更新 Cookie，只需赋值 document.cookie 属性：
document.cookie = "username=John; expires=Fri, 31 Dec 2023 23:59:59 GMT; path=/";
这条语句创建了一个名为 username 的 Cookie，其值为 John，并设置在指定日期后过期，并且对整个网站有效。
读取 Cookie
读取 Cookie 转为访问 document.cookie 字符串，其包含了所有 Cookie （以分号加空格分隔）：
var cookies = document.cookie;
然后、可以使用 JavaScript 字符串方法分解这个字符串来获取特定的 Cookie 值。
二、详细操作
除了基本的创建和读取，JavaScript 还允许开发者实现更多细致的操作。
解析 Cookie 字符串
获取到 document.cookie 后，通常需要解析这个字符串来找到我们需要的 Cookie 值。这通常通过分割字符串实现：
function getCookieValue(name) {
let nameString = name + "=";
let value = null;
document.cookie.split(';').forEach(function(cookie) {
while (cookie.charAt(0) === ' ') {
cookie = cookie.substring(1); // 去掉前导空格
}
if (cookie.indexOf(nameString) === 0) {
value = cookie.substring(nameString.length, cookie.length);
return;
}
});
return value;
}
这个函数接受一个 Cookie 名称，然后返回其对应的值，如果没有找到，则返回 null。
设置 Cookie 有效期
Cookie 的有效期是控制其生命周期的一个重要因素，没有设定 expires 或 max-age 的 Cookie 会被视为会话 Cookie，浏览器关闭时自动删除。
document.cookie = "username=John; max-age=3600; path=/";
上面的代码中，max-age 设置了 Cookie 的存活时间，单位是秒。
三、安全性控制
在操作 Cookie 时，需要关注安全性控制，特别是在含有敏感信息的场合。
使用 HttpOnly 属性
为了防止跨站脚本攻击（XSS），应该对包含重要数据的 Cookie 设置 HttpOnly 属性：
document.cookie = "userId=abc123; HttpOnly";
这样设置后，这个 Cookie 将无法通过 JavaScript 的 document.cookie API 访问，可以有效减少 XSS 攻击的风险。
设置 Secure 属性
为了防止信息在客户端和服务器之间传输时被窃听，对于敏感信息，应当只在加密的 HTTPS 连接中使用 Cookie。设置 Secure 属性，可以实现这一点：
document.cookie = "sessionId=xyz456; Secure";
四、路径和域
另外，还可以为 Cookie 设置路径和域，以限制其发送的范围。
设置 Path
document.cookie = "option=value; path=/app";
设置 path 属性可以指定一个 URL 路径，只有访问这个路径及其子路径的页面请求才会携带这个 Cookie。
设置 DomAIn
document.cookie = "option=value; domain=example.com";
通过 domain 属性，可以指定哪些域名下的页面可以请求这个 Cookie。这对于跨子域应用尤其重要。
五、删除 Cookie
删除 Cookie 的操作实际上是将其过期时间设置为过去的时间：
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
上述代码将 username 这个 Cookie 的过期时间设置为了一个早已过去的时间，从而导致浏览器删除它。
六、考虑 Cookie 的限制
在使用 Cookie 时还需要注意一些限制性的因素，如：
Cookie 的总数和大小限制
浏览器对于单个域名下的 Cookie 数量和大小是有限制的，这通常是个数 50 个左右，每个大小不超过 4KB。
跨域限制
出于安全考虑，Cookie 不提供跨域共享的能力，即不能由 domain1.com 设置的 Cookie 被 domain2.com 访问。
用户设置的限制
用户可以在浏览器中设置 Cookie 的隐私等级，可能会限制 Cookie 的使用。
JavaScript 操作 Cookie 时，了解并掌握其技术和安全性的细节非常重要。合理利用 Cookie 能为网站用户提供更流畅和个性化的体验，同时也需要关注和保障数据的安全性。
相关问答FAQs：
问题1： 我如何在 JavaScript 中创建一个 Cookie？
回答：使用 JavaScript 可以很容易地创建一个 Cookie。你可以使用 document.cookie 属性来设置一个新的 Cookie。例如，你可以使用以下代码创建一个名为 username 的 Cookie，并将其值设置为 JohnDoe：
document.cookie = "username=JohnDoe";
问题2： JavaScript 如何读取 Cookie 的值？
回答：要读取 Cookie 的值，你可以使用 document.cookie 属性。这个属性返回一个字符串，包含当前网页的所有 Cookie。你可以使用一些 JavaScript 函数来解析这个字符串并提取所需的 Cookie 值。例如，下面的代码演示了如何读取名为 username 的 Cookie 的值：
function getCookieValue(cookieName) {
var cookieData = document.cookie.split("; ");
for (var i = 0; i < cookieData.length; i++) {
var cookie = cookieData[i].split("=");
if (cookie[0] === cookieName) {
return cookie[1];
}
}
return null;
}
var username = getCookieValue("username");
问题3： 如何在 JavaScript 中删除一个 Cookie？
回答：要删除一个 Cookie，你可以设置它的过期时间为一个过去的时间。这将导致浏览器将其从 Cookie 存储中删除。以下是一个删除名为 username 的 Cookie 的示例代码：
function deleteCookie(cookieName) {
document.cookie = cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}
deleteCookie("username");
请注意，deleteCookie 函数还设置了 path=/;，这将确保删除指定路径下的 Cookie。如果你的 Cookie 是设置在根路径下的，这将是一个必需的步骤。
