JavaScript数据存储 Cookie篇

下面是JavaScript数据存储之Cookie篇的完整攻略。

什么是Cookie

Cookie 是一种在客户端存储数据的机制，通过浏览器将数据存储在用户的计算机上。Cookie 通常由 Web 服务器生成，以便服务器可以记住用户的状态，从而改善用户对网站的体验。

Cookie 的属性

Cookie 有以下几个属性：

• 名称：Cookie 的名称。
• 值：Cookie 存储的数据。
• 过期时间：Cookie 的有效期。
• 路径：指定该 Cookie 的 URL 路径。
• 域：指定可以访问该 Cookie 的域名。

创建Cookie

在 JavaScript 中使用 document.cookie 属性就可以操作 Cookie。

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

设置 Cookie 时需要提供一个 name=value 的值对，expires 为可选参数，用于指定 Cookie 的过期时间，格式为 GMTString。

示例：

// 设置一个过期时间为1天的Cookie
let d = new Date();
d.setTime(d.getTime() + (1 * 24 * 60 * 60 * 1000));
const expires = "expires=" + d.toGMTString();
document.cookie = "username=John Doe;" + expires + ";path=/";

获取Cookie

使用 document.cookie 属性获取所有的 Cookie。

// 获取所有 Cookie
const cookie = document.cookie;

获取指定名称的 Cookie。

// 获取名称为 username 的 Cookie
function getCookie(name) {
  const value = "; " + document.cookie;
  const parts = value.split("; " + name + "=");
  if (parts.length === 2) {
    return parts.pop().split(";").shift();
  }
}

删除Cookie

要删除 Cookie，只需将其值设置为空，并将其过期时间设置为过去（可以使用任何过去的日期）。

// 删除 Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"

示例

设置和获取 Cookie 的示例：

// 设置 Cookie
document.cookie = "username=John Doe";

// 获取 Cookie
const cookie = document.cookie;
console.log(cookie); // "username=John Doe"

// 获取指定名称的 Cookie
function getCookie(name) {
  const value = "; " + document.cookie;
  const parts = value.split("; " + name + "=");
  if (parts.length === 2) {
    return parts.pop().split(";").shift();
  }
}
const username = getCookie("username");
console.log(username); // "John Doe"

删除 Cookie 的示例：

// 删除 Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"