如何创建和读取 Cookie 的值

htmlweb developmentfront end technology更新于 2024/9/2 8:44:17

概述

Cookie 是一种临时存储机制，它以键值对的形式存储用户数据。Cookie 存储在客户端系统中。当用户访问网站时，请求会被发送到网站所在的服务器，服务器加载内容并将其返回到接收端(接收者可以是客户端或用户)。服务器发送 Cookie 来存储用户数据以备将来使用。但这完全取决于用户是否希望将登录凭据存储在 Cookie 中。可食用 Cookie 中的甜甜圈内填充有巧克力，与网页 Cookie 相同。甜甜圈内填充的 Cookie 即为甜甜圈，而巧克力填充的 Cookie 即为 Cookie 的值。

语法

创建 Cookie 的语法为 −

document.cookie= cookieName + cookieValue + cookieExpiry;

cookieName − 它是存储值的 Cookie 的名称。例如:用户名、地址以及更多字段。
cookieValue − 它是存储在 Cookie 名称的键中的值。例如:Alex、美国等。
cookieExpiry− 它是一个数值，表示 Cookie 在客户端浏览器中有效期的天数。

算法

步骤 1 − 在您的文本编辑器(例如 Sublime 编辑器或 Visual Studio Code 编辑器)中创建一个 HTML 文件。在 HTML 文件中添加 HTML 样板代码。

步骤 2 − 现在，在 HTML 文档的 body 标签中添加一个 onload() 事件函数。将一个名为"myFunc()"的函数传递给 onload() 函数。

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

步骤 3 − 现在，在我们创建 HTML 文件的同一文件夹中创建一个 script.js 文件。将 script.js 文件链接到 HTML 文档的 body 标签末尾之前。

<script src="script.js"></script>

步骤 4 − 现在在脚本文件中创建一个箭头函数，用于检查客户端系统中是否存在该 Cookie。该函数名称应与我们在 body 标签中作为属性传递给 onload() 函数的名称相同。

myFunc = () => {
   var cl = readCookiesValue("clients_Name");
   var ad = readCookiesValue("clients_address")
   if (cl != "") {
      alert("Welcome " + cl +" from "+ad + " to the server");
   } else {
      cl = prompt("Write your name", "");
      ad = prompt("Write your address", "");
      if (cl != "" && cl != null) {
         createCookies("clients_Name", cl, 30);
         createCookies("clients_address", ad, 30);
      }
   }
}

步骤 5 − 现在创建一个名为"createCookies"的箭头函数，该函数将为用户创建一个 Cookie。创建 Cookie 函数将接受三个参数:Cookie 名称、Cookie 值和 Cookie 有效期。该 Cookie 将使用"document.cookie"语法创建。

createCookies = (ckName, ckValue, ckExpiry) => {
   var cdate = new Date();
   date.setTime(cdate.getTime() + (ckExpiry * 24 * 60 * 60 * 1000));
   var expires = "expires=" + cdate.toGMTString();
   document.cookie = ckName + "=" + ckValue + ";" + expires + ";path=/";
}

步骤 6 − 现在，在创建 cookie 之后，创建一个名为"readCookiesValue"的箭头函数，该函数将读取浏览器中的当前 cookie，它将以 cookie 名称作为参数并返回 cookie 的值。

readCookiesValue = (cookieName) => {
   var name = cookieName + "=";
   var decoded_cookie = decodeURIComponent(document.cookie);
   var dcooks = decoded_cookie.split(';');
   for (let i = 0; i < dcooks.length; i++) {
      var c = dcooks[i];
      while (c.charAt(0) == ' ') {
         c = c.substring(1);
      }
      if (c.indexOf(name) == 0) {
         return c.substring(name.length, c.length);
      }
   }
   return "";
}

步骤 7− 读取和创建 Cookie 的函数已成功创建。

示例

在此示例中，我们创建了一个函数，用于检查客户端浏览器中是否存在 Cookie。如果客户端浏览器中不存在 Cookie，则它将为当前客户端创建 Cookie，并将其进一步存储以备将来使用，直到 Cookie 过期为止。

<html>
<head>
   <title>Create and read cookie value</title>
</head>
<body onload="myFunc()">
   <h1 style="text-align: center;color: green;" onload="myfunc()">Welcome to tutorialspoint.com</h1>
   <script src="script.js"></script>
   <script>
      myFunc = () => {
         var client = readCookiesValue("clients_Name");
         var adress = readCookiesValue("clients_address")
         if (client != "") {
            alert("Hello " + client +" from "+adress);
         } else {
            client = prompt("Enter your name", "");
            adress = prompt("Enter your adress", "");
            if (client != "" && client != null) {
               createCookies("clients_Name", client, 30);
               createCookies("clients_address", adress, 30);
            }
         }
      }
      createCookies = (cookieName, cookieValue, cookieExpiry) => {
         var date = new Date();
         date.setTime(date.getTime() + (cookieExpiry * 24 * 60 * 60 * 1000));
         var expires = "expires=" + date.toGMTString();
          document.cookie = cookieName + "=" + cookieValue + ";" + expires; + ";path=/";
      }
      readCookiesValue = (cookieName) => {
         var name = cookieName + "=";
         var decoded_cookie = decodeURIComponent(document.cookie);
         var dcooks = decoded_cookie.split(';');
         for (let i = 0; i < carr.length; i++) {
            var c = carr[i];
            while (c.charAt(0) == ' ') {
               c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
               return c.substring(name.length, c.length);
            }
         }
         return "";
      }
   </script>
</body>
</html>

输出

下图展示了上述示例的输出，其中我们构建了读取和创建 Cookie 的函数。因此，当用户首次在浏览器中加载上述示例时，该函数将检查当前请求是否存在 Cookie。如果不存在，则客户端将收到一条提示，要求输入其姓名。客户端在输入框中输入姓名后，将收到另一条提示，要求输入其城市名称，然后重定向到主页面。因此，当客户端第二次加载网页时，该函数将再次检查 Cookie，这次如果 Cookie 已存在于客户端浏览器中，则客户端将收到一条欢迎消息"Hello clientName from cityName"，您可以在第三张图中看到。