Cookie

Cookie 是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。

Cookie 解决了 http 无状态的问题，让会话管理变得容易。

Cookie 数据是基于键值对保存的，例如：

username = John Doe

将 cookie 字符串赋值给 document.cookie 就能创建 cookie。

使用 JavaScript，可以像这样创建 cookie：

document.cookie = "username=John Doe";

默认情况下，当浏览器关闭时，cookie 会被删除，您还可以添加 cookie 的过期日期（UTC 时间）。

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

默认情况下，cookie 属于当前页面，使用 path 参数，可以告诉浏览器 cookie 所属的路径。

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

document.cookie 返回一个包含所有 cookie 的字符串，像：cookie1=value; cookie2=value; cookie3=value; 。

let x = document.cookie;

将新的 cookie 字符串赋值给 document.cookie 就能更改一个已有的 cookie。

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

同名的 cookie 值会被新的值覆盖。

删除 cookie 非常简单。删除 cookie 时不必指定 cookie 值。只需将 expires 参数设置为过去的日期。

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

您应该定义 cookie 路径以确保您删除正确的 cookie。

如果您不指定路径，某些浏览器将不允许您删除 cookie。

在接下来的示例中，我们将创建一个存储访问者姓名的 cookie。

访问者第一次到达网页时，会要求他/她填写姓名，然后将姓名存储在 cookie 中。

下次访问者到达同一页面时，他/她将收到欢迎消息。

对于示例，我们将创建 3 个 JavaScript 函数：

设置 cookie 值的函数
获取 cookie 值的函数
检查 cookie 值的函数

首先，我们创建一个保存cookie的函数：

function setCookie(cookieName, cookieValue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
  let expires = "expires=" + d.toUTCString();
  document.cookie = cookieName + "=" + cookieValue + ";" + expires + ";path=/";
}

示例说明：

上面函数的参数是 cookie 的名称 (cookieName)、cookie 的值 (cookieValue) 以及 cookie 到期前的天数 (exdays)。

该函数通过将 cookiename、cookie 值和 expires 字符串相加来设置 cookie。

然后，我们创建一个获取指定的 cookie 的值的函数：

function getCookie(cookieName) {
  let name = cookieName + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(";");
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == " ") {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

功能说明：

函数以 cookie 名作为参数 (cookieName)。
使用要搜索的文本 (cookieName + "=") 创建一个变量（名称）。
解码 cookie 字符串，以处理带有特殊字符的 cookie，例如 $ 。
将 document.cookie 按分号拆分为名为 ca (ca = decodedCookie.split(';')) 的数组。
循环遍历 ca 数组 (i = 0; i < ca.length; i++)，并读出每个值 (c = ca[i])。
如果找到 cookie (c.indexOf(name) == 0)，则返回 cookie 的值 (c.substring(name.length, c.length))。
如果未找到 cookie，则返回 ""。

最后，我们创建了检查是否设置了 cookie 的函数。

如果设置了 cookie，它将显示问候语。

如果没有设置 cookie，它会显示一个提示框，询问用户名，并通过调用 setCookie 函数将用户名 cookie 存储 365 天：

function checkCookie() {
  let username = getCookie("username");
  if (username != "") {
    alert("欢迎回来 " + username);
  } else {
    username = prompt("请输入你的姓名：", "");
    if (username != "" && username != null) {
      setCookie("username", username, 365);
    }
  }
}

所有的函数

function setCookie(cookieName, cookieValue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1000);
  let expires = "expires=" + d.toUTCString();
  document.cookie = cookieName + "=" + cookieValue + ";" + expires + ";path=/";
}

function getCookie(cookieName) {
  let name = cookieName + "=";
  let ca = document.cookie.split(";");
  for (let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == " ") {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function checkCookie() {
  let user = getCookie("username");
  if (user != "") {
    alert("Welcome again " + user);
  } else {
    user = prompt("Please enter your name:", "");
    if (user != "" && user != null) {
      setCookie("username", user, 365);
    }
  }
}

上面的示例 checkCookie() 在页面加载时运行该函数。

Cookie

创建 Cookie

读取 Cookie

更改 Cookie

删除 Cookie

Cookie 示例

设置 Cookie 的函数

获取 Cookie 的函数

检查 Cookie 的函数

所有的函数

目录