Javascript 对cookie操作详解及实例

什么是cookie

Cookie 是一种存储在用户计算机上的小数据文件，它通常由网站在后端生成，通过浏览器发送到前端，并在前端保存。然后，在用户下次访问该网站时，该网站可以再次检索这些 cookie，并计算出该用户的特定信息，例如用户首选语言、购物车中的项目等。通常情况下，cookie 用于存储与特定网站相关的用户偏好和其他信息。

Javascript 对cookie的操作

使用JavaScript 可以对 cookie 进行以下操作:

创建cookie
获取cookie
设置cookie到期时间
删除cookie

创建cookie

要创建一个 cookie，请使用 document.cookie:

document.cookie = "username=Minghui Zhang";

上面的代码创建一个名为 username，值为 Minghui Zhang 的 cookie。如果您尝试查看 document.cookie，则应该看到以下输出：

"username=Minghui Zhang"

获取cookie

要获取 cookie 的值，请使用以下代码行：

var x = document.cookie;

上面的代码将返回存储在 cookie 中的所有内容。

如果要获取特定 cookie 的值，请使用以下函数：

function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i < ca.length; i++) {
    var 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 中的 cname 变量的值。如果 cookie 不存在，则返回空字符串。

设置 cookie 的到期时间

默认情况下，cookie 是在浏览器关闭时删除的。但是，您还可以将 cookie 设置为在特定日期过期。要设置 cookie 的到期日期，请使用以下语法：

var d = new Date();
d.setTime(d.getTime() + (24*60*60*1000));
var expires = "expires="+ d.toUTCString();

document.cookie = "username=John" + ";" + expires;

上面的代码将在一天后过期 username cookie。

删除cookie

要删除 cookie，请将 cookie 的到期日期设置为过去的日期，如下所示：

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

该代码会删除 username cookie。

示例

示例1: 在用户访问网站时记录访问次数

function checkCookie() {
  var count = getCookie("count") || 0;
  count++;
  setCookie("count", count, 30);
  alert("你是第" + count + "次访问该网站！");
}

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

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

该示例如下：

<!DOCTYPE html>
<html>
<body onload="checkCookie()">
<h2>Cookie 计数器</h2>
<p>每当您访问此网站时，cookie 将存储您的访问次数。</p>
</body>
</html>

示例2: 通过 cookie 在网站之间共享数据

假设您正在开发一个具有登录和购物车功能的网站，并且您想使购物车在不同网页之间进行共享。要通过 cookie 共享购物车数据，请使用以下代码：

var cart = {item1: "product1", item2: "product2"};

// To set the cart
document.cookie = "cart=" + JSON.stringify(cart);

// To get the cart
var cart = JSON.parse(getCookie("cart"));

上面的代码将以 JSON 格式存储 cart 对象，并通过 cookie 共享它所表示的购物车数据。