JavaScript Cookie

什么是 Cookie？

Cookie 是存储在您计算机上的小文本文件中的数据。

当网络服务器将网页发送到浏览器时，连接就建立了关闭，服务器就会忘记有关用户的一切。

Cookie 的发明是为了解决“如何记住有关信息”的问题用户”：

当用户访问网页时，他/她的名字可以存储在 cookie 中。
下次用户访问该页面时，cookie 会“记住”他/她的名字。

Cookie 以名称-值对的形式保存，例如：

username = John Doe

当浏览器从服务器请求网页时，属于该页面的 cookie 会添加到请求中。这样服务器获取必要的数据来“记住”有关用户的信息。

如果您的浏览器关闭了本地 cookie 支持，则以下示例均无效。

使用 JavaScript 创建 Cookie

JavaScript 可以使用 document.cookie 创建、读取和删除 cookie 财产。

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

document.cookie = "username=John Doe";

您还可以添加到期日期（以 UTC 时间表示）。默认情况下，关闭浏览器时会删除 cookie：

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

通过路径参数，您可以告诉浏览器该cookie属于哪个路径。默认情况下，cookie 属于当前页面。

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

使用 JavaScript 读取 Cookie

使用 JavaScript，cookie 可以这样读取：

let x = document.cookie;

document.cookie 将返回一个字符串中的所有 cookie，类似于： cookie1=value; cookie2=值； cookie3=值；

使用 JavaScript 更改 Cookie

使用 JavaScript，您可以像创建 cookie 一样更改 cookie：

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

旧的 cookie 被覆盖。

使用 JavaScript 删除 Cookie

删除cookie非常简单。

删除 cookie 时不必指定 cookie 值。

只需将过期参数设置为过去的日期即可：

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

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

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

Cookie 字符串

document.cookie 属性看起来像普通的文本字符串。但事实并非如此。

即使你将整个cookie字符串写入document.cookie，当你再次读取它时，你只能看到它的名称-值对。

如果您设置新的 cookie，旧的 cookie 不会被覆盖。新的cookie被添加到document.cookie中，因此如果您读取document.cookie 你会再次得到类似的东西：

cookie1=值； cookie2=值；

如果你想查找某个指定cookie的值，你必须编写一段JavaScript 在 cookie 字符串中搜索 cookie 值的函数。

JavaScript Cookie 示例

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

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

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

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

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

设置 Cookie 的函数

首先，我们创建一个函数，将访问者的姓名存储在 cookie 变量中：

例子

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

示例解释：

上面函数的参数是cookie的名称（cname）、cookie的值 (cvalue)，以及 cookie 过期之前的天数 (exdays)。

该函数通过将 cookiename、cookie 添加到一起来设置 cookie 值和过期字符串。

获取 Cookie 的函数

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

例子

function getCookie(cname) {
   
let name = cname + "=";
   
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 "";
}

功能解释：

将 cookiename 作为参数 (cname)。

使用要搜索的文本创建变量（名称）（cname +“=”）。

解码cookie字符串，以处理带有特殊字符的cookie，例如'$'

将 document.cookie 以分号分割成一个名为 ca 的数组 (ca = 解码Cookie.split(';'))。

循环遍历ca数组(i=0; i < ca.length; i++)，并读出每个值 c=ca[i])。

如果找到 cookie (c.indexOf(name) == 0)，则返回 cookie 的值 (c.substring(名称.长度，c.长度)。

如果没有找到cookie，则返回“”。

检查 Cookie 的函数

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

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

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

例子

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

现在都在一起了

例子

function setCookie(cname, cvalue, exdays) {
  const d = new Date();
   
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  let expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + 
";" + expires + ";path=/";
}
function getCookie(cname) {
  let name = cname + "=";
    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);
      }
  }
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  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 "";
}

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, 30);
     }
  }
}
</script>
</head>

<body onload="checkCookie()"></body>

</html>

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