JavaScript cookie原理及使用实例

JavaScript cookie是一种在客户端存储数据的机制，它的实现方式是通过HTTP响应头的Set-Cookie字段将数据发送到客户端浏览器，在之后的请求中再通过Cookie字段从客户端浏览器端发送数据到服务端，从而实现数据在客户端的存储和传递。

创建Cookie

要创建Cookie，我们可以通过设置document.cookie属性来实现。以下是创建Cookie的JavaScript代码示例：

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";

上面的代码将会在客户端创建一个名为“username”的cookie，并将值设置为“John Doe”。同时，它还设置了“过期时间”为2022年12月18日，路径为“/”，表示这个cookie将在跟路径下面的所有URL中都可用。需要注意的是，expires字段必须按照特定的格式进行设置。

读取Cookie

要读取Cookie，我们只需要读取document.cookie属性的值。以下是读取Cookie的JavaScript代码示例：

var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)username\s*\=\s*([^;]*).*$)|^.*$/, "$1");

上面的代码将会获取名为“username”的cookie的值，并将其存储在cookieValue变量中。需要注意的是，读取cookie时需要对其进行解析，因为document.cookie返回的是一个字符串，不同cookie之间是通过分号（“;”）分隔的。

示例说明

示例一

假设我们要在客户端存储用户的选项，以便在下一次用户访问页面时可以自动加载用户的选项。为此，我们可以创建一个包含所有选项的JavaScript对象，并将它存储在Cookie中。以下是存储选项到Cookie中的JavaScript代码示例：

var options = {
  "theme": "dark",
  "language": "en"
};

var cookieValue = encodeURIComponent(JSON.stringify(options));
document.cookie = "options=" + cookieValue + "; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";

上面的代码将会创建一个名为“options”的cookie，并将值设置为一个经过序列化和编码的JavaScript对象。为了将JavaScript对象编码为字符串，我们使用了JSON.stringify()方法，并将结果通过encodeURIComponent()方法进行了编码。

示例二

假设我们要实现一个“记住我”的功能，使得用户下一次访问网站时不需要重新输入用户名和密码就可以登录。为此，我们可以在用户登录时创建一个名为“rememberMe”的cookie，并将它设置为“1”。在下一次用户访问网站时，我们就可以检查这个cookie，如果它存在并等于“1”，那么我们就自动登录用户。以下是实现“记住我”功能的JavaScript代码示例：

// 用户登录时创建“rememberMe”cookie
function login(username, password, rememberMe) {
  // 省略登录逻辑
  if (rememberMe) {
    document.cookie = "rememberMe=1; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";
  }
}

// 检查“rememberMe”cookie并自动登录
function autoLogin() {
  var rememberMeValue = document.cookie.replace(/(?:(?:^|.*;\s*)rememberMe\s*\=\s*([^;]*).*$)|^.*$/, "$1");
  if (rememberMeValue === "1") {
    // 自动登录
  }
}

上面的代码分别演示了创建一个名为“rememberMe”的cookie和检查这个cookie的值的过程。留意到这里我们在创建和读取cookie时都设置了cookie的路径为“/”，这意味着这个cookie将在整个网站下都可用。