JavaScript 中的 Cookie 综合指南

JavaScript 中的 Cookie

Cookie 是网站存储在用户浏览器上的小数据片段。它们通常用于存储用户首选项、跟踪会话或维护请求之间的状态。

JavaScript 提供了创建、读取和删除 cookie 的简单方法，使其成为客户端存储和会话管理的重要工具。

---

1.设置 Cookie

Cookie 是通过将字符串分配给 document.cookie 来创建的。

语法：

document.cookie = "key=value; expires=DATE; path=PATH; domain=DOMAIN; secure; SameSite=VALUE";

• key=value：cookie 的键值对。
• expires：到期日期（可选）。如果未设置，该 cookie 是会话 cookie，并在浏览器关闭时被删除。
• 路径：可访问 cookie 的站点内路径（默认：当前路径）。
• domain：可访问 cookie 的域（默认：当前域）。
• 安全：Cookie 仅通过 HTTPS 发送。
• SameSite：控制跨站点行为（严格、宽松或无）。

示例：

document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

---

2.读取 Cookie

document.cookie 属性将当前域和路径的所有 cookie 作为单个字符串返回。

示例：

console.log(document.cookie);
// Output: "username=JohnDoe; theme=dark; sessionId=abc123"

要提取特定的cookie，请解析字符串：

function getCookie(name) {
  const cookies = document.cookie.split("; ");
  for (let cookie of cookies) {
    const [key, value] = cookie.split("=");
    if (key === name) return value;
  }
  return null;
}
console.log(getCookie("username")); // Output: JohnDoe

---

3.更新 Cookie

要更新 cookie，请使用相同的键但不同的值或选项再次设置它。

示例：

document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
console.log(document.cookie); // Output: "username=JaneDoe; ..."

---

4.删除 Cookie

要删除 Cookie，请将其过期日期设置为过去的日期。

示例：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

---

5.处理特殊字符

cookie值中的特殊字符必须使用encodeURIComponent进行编码并使用decodeURIComponent进行解码。

示例：

document.cookie = "userInfo=" + encodeURIComponent("John Doe & Admin");
console.log(decodeURIComponent(getCookie("userInfo"))); // Output: John Doe & Admin

---

6.安全考虑

1. 安全标志：
   • 使用安全来确保 cookie 仅通过 HTTPS 传输。

   document.cookie = "sessionId=abc123; secure";

1. HttpOnly Cookie:

   • 无法通过JavaScript访问（在服务器端设置）。

2. SameSite 属性:

   • 控制跨站点 cookie 行为以防止 CSRF 攻击。

document.cookie = "key=value; expires=DATE; path=PATH; domain=DOMAIN; secure; SameSite=VALUE";

---

7. Cookie 属性汇总

Attribute	Description
expires	Expiration date for the cookie.
path	Limits cookie to specific paths.
domain	Specifies the domain for the cookie.
secure	Ensures cookie is sent over HTTPS.
SameSite	Controls cross-site cookie behavior.

---

8.使用 JavaScript 管理 Cookie

为了使 cookie 管理更容易，请将常用操作封装在实用函数中。

示例：

document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

---

9.总结

Cookie 是维护 Web 应用程序状态的基本工具。正确的处理可确保功能，同时保护用户数据。

• 使用 Secure 和 SameSite 来获得更安全的 cookie。
• 避免将敏感信息直接存储在 Cookie 中。
• 使用 JavaScript 实用程序来简化 cookie 管理。

嗨，我是 Abhay Singh Kathayat！
我是一名全栈开发人员，拥有前端和后端技术方面的专业知识。我使用各种编程语言和框架来构建高效、可扩展且用户友好的应用程序。
请随时通过我的商务电子邮件与我联系：kaashshorts28@gmail.com。

以上是JavaScript 中的 Cookie 综合指南的详细内容。更多信息请关注PHP中文网其他相关文章！