JavaScript 获取 Cookie

Cookie 是什么？

Cookie 是一种小型的文本文件，存储在用户计算机中。当用户访问 Web 网站时，这些文本文件就被浏览器保存下来。Web 服务器可以读取，写入和删除 Cookie 中的信息。Cookie 中通常包含了记录用户行为的数据，例如登录数据、购物车内容和用户偏好等等。

如何获取 Cookie？

在 JavaScript 中，可以使用 document.cookie 方法获取 Cookie 值。该方法会返回当前页面中使用的所有 Cookie 值，每个值以分号加空格分隔开。

const cookies = document.cookie;
console.log(cookies);

输出：

"username=johndoe; token=abc123; language=English"

如果要获取某个特定的 Cookie 值，可以写一个获取 Cookie 的函数：

function getCookie(name) {
  const cookieArray = document.cookie.split("; ");
  for (let i = 0; i < cookieArray.length; i++) {
    const cookiePair = cookieArray[i].split("=");
    if (name === cookiePair[0]) {
      return decodeURIComponent(cookiePair[1]);
    }
  }
  return null;
}

该函数会在 Cookie 列表中查找特定的 Cookie，如果找到了，则返回 Cookie 值，否则返回 null。

如何设置 Cookie？

在 JavaScript 中，可以使用以下方法设置 Cookie：

document.cookie = "name=value;expires=date;path=path;domain=domain;secure";

其中，name 表示 Cookie 的名称，value 表示 Cookie 的值，expires 表示 Cookie 的过期时间，path 表示 Cookie 的路径，domain 表示 Cookie 的域名，secure 表示是否仅在 HTTPS 连接下发送 Cookie。

以下是一个设置 Cookie 的示例：

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

该 Cookie 的名称是 username，值是 johndoe，过期时间为 2021 年 12 月 31 日，路径为根路径 /。

如何删除 Cookie？

在 JavaScript 中，可以通过设置 Cookie 的过期时间为过去的时间，从而删除一个 Cookie。以下是一个删除 Cookie 的示例：

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

该语句会将名为 username 的 Cookie 的值设置为空字符串，过期时间设置为 1970 年 1 月 1 日，路径为根路径 /。这样就达到了删除该 Cookie 的目的。

总结

通过 JavaScript 获取、设置和删除 Cookie 可以为 Web 应用程序提供更好的用户体验和更高的性能。在编写代码时，我们需要注意遵守相关 Cookie 政策，并保证用户数据的安全性和隐私。