如何设置无过期日期的 JavaScript Cookie？

在本教程中，我们将学习如何设置一个无过期日期的 JavaScript cookie。Web 服务器会向浏览器发送 cookie，cookie 是包含唯一标识符的小型文件。每次浏览器请求新页面时，服务器都会收到这些 cookie。它允许网站跟踪您的偏好和在线行为。

JavaScript cookie 中的过期选项是可选的。“expires” 属性是可选的。如果您为该属性提供有效的日期或时间，则 cookie 将在给定的日期或时间过期，之后将无法访问 cookie 的值。

语法

现在让我们来看一下设置无过期日期的 JavaScript cookie 的语法：

var allcookies = document.cookie;
document.write ("All Cookies : " + allcookies );

在语法中，我们使用 'document.cookie' 方法可以获取文档的所有 cookie 并将它们存储在一个变量中。正如我们上面看到的，expire 属性是可选的，如果用户没有定义过期的时间或日期，则它将始终被调用。

算法

我们已经看到了上面设置无过期日期的 JavaScript cookie 的语法，现在我们将一步一步地了解完整的步骤：

  • 首先，我们将在代码主体中创建一个表单，在主体中定义一些输入字段。

  • 在表单中使用 button 标签，我们将创建一个按钮，在这个按钮中我们将定义onclick事件。

  • onclick事件会在按下按钮时调用其中定义的函数。

  • 在脚本中，我们将定义一个函数，在这个函数中，首先使用 'document.write' 方法将页面上的所有 cookie 获取到一个变量中，然后打印它们。

  • 使用split()方法，我们将所有 cookie 存储到数组的不同索引中。

  • 我们将遍历数组，对于每个索引，我们可以获取当前 cookie 的名称和值，并分别打印它们。

我们已经看到了设置无过期日期的 JavaScript cookie 的语法和算法，现在让我们来看一个例子来实现上面讨论的步骤。

示例

在这个例子中，我们将获取文档的所有 cookie 并先将它们全部打印出来，然后分别打印它们。

<html>
<head>
   <script>
      function ReadCookie() {
         var allcookies = document.cookie;
         document.write ("All Cookies : " + allcookies );
         // Get all the cookies pairs in an array
         cookiearray = allcookies.split(';');

         // Now take key-value pair out of this array
         for(var i=0; i<cookiearray.length; i++) {
            name = cookiearray[i].split('=')[0];
            value = cookiearray[i].split('=')[1];
            document.write ("Key is : " + name + " and Value is : " + value);
         }

      }
   </script>
</head>
<body>
   <h3>How to set a javascript cookie with no expiration date</h3>
   <form name="myform" action="">
      <p> click the following button and see the result −</p>
      <input type="button" value="Get Cookie" onclick="ReadCookie()"/>
   </form>
</body>
</html>

在上面的代码中，首先我们使用<form>标签在代码主体中创建了一个表单，在这个表单中我们创建了一个按钮，它将调用在代码脚本中定义的函数。

在脚本中，我们定义了 'ReadCookie' 函数，在这个函数中，我们定义了一个变量allcookies，它将包含文档的所有 cookie，并将使用document.cookie()方法获取这些 cookie。

此外，我们使用 split 函数将所有 cookie 分隔存储到数组中，然后分别打印每个 cookie。为了分别打印它们，我们遍历了数组，并在每次迭代中打印值和名称。

注意 - Cookie 有保质期。当浏览器关闭时，没有定义过期日期的 cookie 也将被删除。因为它们在浏览器会话结束后被删除，所以有时它们被称为会话 cookie（当浏览器关闭时）。浏览器将删除过期日期在过去的 cookie。设置过期日期并将其存储在 cookie 中将延长其生命周期，超过当前浏览器会话。您可以通过在“expires”属性中输入日期和时间来实现此目的。

结论

在本教程中，我们学习了如何设置无过期日期的 JavaScript cookie。Web 服务器会向浏览器发送 cookie，cookie 是包含唯一标识符的小型文件。每次浏览器请求新页面时，服务器都会收到这些 cookie。JavaScript cookie 中的过期选项是可选的。“expires”属性是可选的。如果您为该属性提供有效的日期或时间，则 cookie 将在给定的日期或时间过期，之后将无法访问 cookie 的值。

更新于：2022年11月7日

2K+ 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告