【JavaScript】cookie的使用

Cookie 让您在网页中存储用户信息。

该随笔将讲述如何在 JavaScript 中使用 cookie。

JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie。

Cookie 保存在名称值对中

cookieName=cookieValue

当浏览器从服务器请求一个网页时，将属于该页的 cookie 添加到该请求中。这样服务器就获得了必要的数据来“记住”用户的信息。

document.cookie = "cookieName=cookieValue";

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

document.cookie = "username=John; expires=Sun, 31 Dec 2022 12:00:00 UTC";

通过 path 参数，您可以告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页：

document.cookie = "username=John; expires=Sun, 31 Dec 2022 12:00:00 UTC; path=/";

var x = document.cookie;

document.cookie 会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2=value; cookie3=value;

可以像你创建 cookie 一样改变它：

document.cookie = "username=Bob; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

删除 cookie 时不必指定 cookie 值，直接把 expires 参数设置为过去的日期即可：

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

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

如果你不指定路径，一些浏览器不会让你删除 cookie。

举例

下面的例子取自w3school

<!DOCTYPE html>
<html>
<head>
<script>
//设置 cookie 的函数
function setCookie(cname,cvalue,exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires=" + d.toGMTString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
//获取 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 的函数
function checkCookie() {
  var user=getCookie("username");
  if (user != "") {
    alert("再次欢迎您，" + user);
  } else {
     user = prompt("请输入姓名：","");
     if (user != "" && user != null) {
       setCookie("username", user, 30);
     }
  }
}
</script>
</head>

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

</html>
posted @ 2022-02-21 23:09  hzyuan  阅读(134)  评论(0)    收藏  举报