cookie

最新推荐文章于 2023-04-07 14:28:49 发布

江月未来

最新推荐文章于 2023-04-07 14:28:49 发布

阅读量74

点赞数

文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_52072846/article/details/121641338

版权

本文介绍了Cookie的基本概念，它是一种存储在用户计算机上的文本文件，用于在web服务器与浏览器之间持久保存数据。通过JavaScript，我们可以设置、获取和检查Cookie，从而实现用户访问记录的功能。例如，当用户首次访问网页时输入名字，之后的每次访问都能得到个性化的欢迎消息。示例代码展示了如何创建这三个功能的JavaScript函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是 Cookie？

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是用于解决 "如何记录客户端的用户信息":

当用户访问 web 页面时，他的名字可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。
JavaScript Cookie 实例

在以下实例中，将创建 cookie 来存储访问者名称。

首先，访问者访问 web 页面, 他将被要求填写自己的名字。该名字会存储在 cookie 中。

访问者下一次访问页面时，他会看到一个欢迎的消息。

在这个实例中会创建 3 个 JavaScript 函数:
设置 cookie 值的函数
获取 cookie 值的函数
检测 cookie 值的函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<head>
  <script>
    //设置coolie值的函数，创建一个函数用于存储访问者的名字
    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;
    }
    //获取 cookie 值的函数
    function getCookie(cname)
    {
      var name = cname + "=";
      var ca = document.cookie.split(';');
      for(var i=0; i<ca.length; i++)
      {
        var c = ca[i].trim();
        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 οnlοad="checkCookie()"></body>
</html>

第一次输入时输入访问者的名字，第二次登录即可受到欢迎问候