JS操作Cookie写入和读取实例代码-前端开发

下面是关于“JS操作Cookie写入和读取实例代码”的完整攻略。

下面是关于“JS操作Cookie写入和读取实例代码”的完整攻略。

什么是Cookie

Cookie是网站可以存储在用户计算机中的小文件。这些文件包含有关用户访问网站的信息，例如登录凭据、购物车中的项目和其他首选项。

为何要使用Cookie

可以使用Cookie提供个性化用户体验、记录用户偏好并跟踪用户行为，部分网站为页面访问量和跟踪广告效果也使用Cookie。Cookie的存储是由用户浏览器进行的，因此不需要在服务器端存储任何东西。

JS如何操作Cookie

JavaScript可以通过document.cookie来操作Cookie。document.cookie是一个字符串，其中存储了页面所需的所有Cookie数据。

以下是一个用于设置Cookie的示例：

document.cookie = "username=John Doe; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";

此代码将创建一个名为username的新Cookie，其值为John Doe。此Cookie的“过期时间”将被设置为现实生活中无限时间以避免其过期，路径被设置为页面根目录以确保其对整个网站可见。

以下是一个用于读取Cookie的示例：

function getCookie(name) {
  var cookieArr = document.cookie.split(";");

  for(var i = 0; i < cookieArr.length; i++) {
    var cookiePair = cookieArr[i].split("=");
    if(name == cookiePair[0].trim()) {
      return decodeURIComponent(cookiePair[1]);
    }
  }
  return null;
}

此代码创建了一个名为getCookie的函数。该函数接受一个字符串参数并返回与该名称相匹配的Cookie的值。如果找不到缓存名称，则返回null。

示例说明

下面有两个与Cookie相关的示例，一个用于设置Cookie，另一个用于读取Cookie。

示例1：设置Cookie

在你的网站上创建一个点击按钮的事件，使用Javascript代码将一个名为“username”的Cookie设置为“John Doe”。

HTML代码：

<!DOCTYPE html>
<html>
<body>

<button onclick="setCookie()">设置Cookie</button>

<script>
function setCookie() {
  document.cookie = "username=John Doe;expires=Fri, 31 Dec 9999 23:59:59 GMT;path=/";
  alert("Cookie设置成功！");
}
</script>

</body>
</html>

JavaScript代码：

function setCookie() {
  document.cookie = "username=John Doe;expires=Fri, 31 Dec 9999 23:59:59 GMT;path=/";
  alert("Cookie设置成功！");
}

示例2：读取Cookie

在你的网站上创建一个点击按钮的事件，使用JavaScript代码来读取名为“username”的Cookie的值。

HTML代码：

<!DOCTYPE html>
<html>
<body>

<button onclick="getCookie()">读取Cookie</button>

<script>
function getCookie() {
  var cookieValue = getCookieByName("username");
  if(cookieValue != null) {
    alert("Cookie值为: " + cookieValue);
  } else {
    alert("Cookie不存在。");
  }
}

function getCookieByName(cookieName) {
  var cookieArray = document.cookie.split(";");

  for(var i = 0; i < cookieArray.length; i++) {
    var cookiePair = cookieArray[i].split("=");
    if(cookieName == cookiePair[0].trim()) {
      return cookiePair[1];
    }
  }
  return null;
}
</script>

</body>
</html>

JavaScript代码：

function getCookie() {
  var cookieValue = getCookieByName("username");
  if(cookieValue != null) {
    alert("Cookie值为: " + cookieValue);
  } else {
    alert("Cookie不存在。");
  }
}

function getCookieByName(cookieName) {
  var cookieArray = document.cookie.split(";");

  for(var i = 0; i < cookieArray.length; i++) {
    var cookiePair = cookieArray[i].split("=");
    if(cookieName == cookiePair[0].trim()) {
      return cookiePair[1];
    }
  }
  return null;
}

以上是关于“JS操作Cookie写入和读取实例代码”的完整攻略。