作者：ChatGPT
如果你曾经写过前端代码，那么你可能会熟悉 JavaScript 中的 document.cookie 属性，它可以让你读取和修改浏览器中的 cookie。但是，你是否真正了解 document.cookie 是如何工作的？本文将深入探讨这个话题。
什么是 Cookie？
Cookie 是一种浏览器用于存储数据的小型数据文件。当用户浏览网站时，网站可以向用户的浏览器发送一个 Cookie，然后在之后的请求中使用该 Cookie 识别用户。Cookie 可以包含各种数据，例如用户信息、偏好设置和购物车内容等。
如何设置 Cookie？
要设置 Cookie，可以向 document.cookie 属性赋值。例如，以下代码将一个名为 username 的 Cookie 设置为 Alice：
document.cookie = "username=Alice";
如何获取 Cookie？
要获取所有 Cookie，可以简单地读取 document.cookie 属性。例如，以下代码将所有 Cookie 的值输出到控制台：
console.log(document.cookie);
要获取特定的 Cookie，可以编写一个函数来解析 document.cookie 的字符串格式。以下是一个可以获取指定 Cookie 值的示例函数：
-- -------------------- ---- -------
-------- --------------- -
----- ------- - ---------------------------
--- ---- - - -- - - --------------- ---- -
----- ------ - ------------------
-- ----------------------- - ----- -
------ ---------------------------- - ---
-
-
------ -----
-如何删除 Cookie？
要删除 Cookie，可以将其过期时间设置为一个早于当前时间的时间戳。以下是一个可以删除指定 Cookie 的示例函数：
function deleteCookie(name) {
document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC;';
}注意事项
值得注意的是，document.cookie 属性返回的是一个包含所有 Cookie 的字符串，而不是一个对象或数组。这意味着你需要自己解析该字符串以获取特定 Cookie 值。
此外，要设置 Cookie 必须满足同源策略（Same-Origin Policy）的限制。如果你尝试设置不同域名的 Cookie，浏览器会拒绝该请求。
结论
在本文中，我们深入探讨了 document.cookie 属性的工作原理，并提供了一些示例代码来演示如何使用它。希望这篇文章能够帮助你更好地理解 Cookie 和前端 Web 开发。
进阶学习：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30168