JavaScrpt中如何使用 cookie 设置查看与删除功能-前端开发

下面详细讲解如何使用JavaScript中的cookie设置查看与删除功能：

下面详细讲解如何使用JavaScript中的cookie设置查看与删除功能：

1. 什么是 cookie？

cookie是一种储存在用户客户端的小型文本文件，用于存储用户数据，实现网站的状态管理。cookie一般用于记录用户的登录状态、购物车信息等。

2. 如何设置 cookie？

在JavaScript中，可以通过document.cookie来设置cookie。下面是示例代码：

document.cookie = "username=John";

上述代码会在客户端创建一个名为username的cookie，它的值为John。

也可以通过添加expires属性来设置过期时间：

// 过期时间为1小时
var expires = new Date();
expires.setTime(expires.getTime() + (60 * 60 * 1000));
document.cookie = "username=John;expires=" + expires.toUTCString();

上述代码会在客户端创建一个名为username的cookie，它的值为John，过期时间为1小时。

3. 如何获取 cookie？

可以通过document.cookie来获取当前网站的所有cookie。下面是一个示例：

console.log(document.cookie);

上述代码会打印出当前网站的所有cookie。

如果需要获取某个cookie的值，可以通过函数来实现：

function getCookie(name) {
  var cookies = document.cookie.split(';');
  for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].trim();
    if (cookie.indexOf(name + '=') === 0) {
      return cookie.substring(name.length + 1, cookie.length);
    }
  }
  return null;
}

上述代码中，getCookie()函数用于获取指定名称的cookie的值。如果存在该cookie，则返回该cookie的值；如果不存在，则返回null。

4. 如何删除 cookie？

可以通过设置cookie的expires属性为一个过去的时间来删除cookie。下面是一个示例：

// 删除名为username的cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC;";

上述代码会删除名为username的cookie。

示例1：记录用户选择语言的设置

以下是一个示例，演示如何使用cookie记录用户选择的语言设置。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>语言选择</title>
    <script>
      function selectLanguage(lang) {
        // 记录用户选择的语言设置
        document.cookie = "lang=" + lang;
        // 刷新页面
        location.reload();
      }

      function getLanguage() {
        // 获取用户选择的语言设置
        var lang = getCookie("lang");
        // 如果用户已经选择过语言，则返回语言设置
        if (lang) {
          return lang;
        }
        // 如果用户没有选择过语言，则返回默认语言（英语）
        return "en";
      }

      function showPage() {
        // 获取用户选择的语言设置
        var lang = getLanguage();
        // 根据用户选择的语言设置显示网页内容
        if (lang === "en") {
          document.getElementById("content").innerHTML = "This is the English version of the website.";
          document.getElementById("select-button").innerHTML = "<button onclick=\"selectLanguage('zh')\">中文</button>";
        } else {
          document.getElementById("content").innerHTML = "这是网站的中文版。";
          document.getElementById("select-button").innerHTML = "<button onclick=\"selectLanguage('en')\">English</button>";
        }
      }

      function getCookie(name) {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
          var cookie = cookies[i].trim();
          if (cookie.indexOf(name + '=') === 0) {
            return cookie.substring(name.length + 1, cookie.length);
          }
        }
        return null;
      }
    </script>
  </head>
  <body onload="showPage()">
    <div id="content"></div>
    <div id="select-button"></div>
  </body>
</html>

上述代码中，selectLanguage()函数用于记录用户选择的语言设置。getLanguage()函数用于获取用户选择的语言设置并返回。showPage()函数用于根据用户选择的语言设置显示网页内容。

示例2：记录用户最近一次访问时间

以下是另一个示例，演示如何使用cookie记录用户最近一次访问时间。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>最近访问时间</title>
    <script>
      function showLastVisitedTime() {
        // 获取上一次访问时间
        var lastVisitedTime = getCookie("lastVisitedTime");
        // 如果没有上一次访问时间，则显示默认信息
        if (!lastVisitedTime) {
          document.getElementById("msg").innerHTML = "欢迎初次访问本网站！";
          return;
        }
        // 计算时间差
        var now = new Date();
        var last = new Date(lastVisitedTime);
        var diff = now.getTime() - last.getTime();
        var diffDays = Math.floor(diff / (1000 * 60 * 60 * 24));
        // 显示时间差信息
        if (diffDays === 0) {
          document.getElementById("msg").innerHTML = "您上次访问本网站是今天！";
        } else {
          document.getElementById("msg").innerHTML = "您上次访问本网站是 " + diffDays + " 天前！";
        }
      }

      function setLastVisitedTime() {
        // 设置本次访问时间
        var now = new Date();
        document.cookie = "lastVisitedTime=" + now.toUTCString();
      }

      function getCookie(name) {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
          var cookie = cookies[i].trim();
          if (cookie.indexOf(name + '=') === 0) {
            return cookie.substring(name.length + 1, cookie.length);
          }
        }
        return null;
      }
    </script>
  </head>
  <body onload="showLastVisitedTime();setLastVisitedTime();">
    <div id="msg"></div>
  </body>
</html>

上述代码中，showLastVisitedTime()函数用于显示上一次访问时间的信息。setLastVisitedTime()函数用于设置本次访问时间。在浏览器加载页面时，先调用showLastVisitedTime()函数显示上一次访问时间的信息，然后再调用setLastVisitedTime()函数设置本次访问时间的cookie。这样就可以在下一次访问网站时显示上一次访问时间的信息了。