JavaScript 与 Cookies

什么是 Cookies?

在 JavaScript 中，Cookie 是存储在用户 Web 浏览器中的数据。Cookie 以键值对的形式存储在浏览器中。我们可以使用 document 对象的 cookie 属性来操作 Cookie。我们可以使用 cookie 属性以键值对的形式设置或存储 Cookie。我们可以使用 document 的 cookie 属性读取 Cookie，并使用解构提取所需信息。

为什么需要 Cookie?

Web 浏览器和服务器使用 HTTP 协议进行通信，HTTP 是一种无状态协议。但对于商业网站来说，需要在不同的页面之间维护会话信息。

例如，您在某个网页上登录了某个网站。同一网站的其他网页如何知道您已完成登录?在这种情况下，会使用 Cookie。

在许多情况下，使用 Cookie 是记住和跟踪偏好、购买记录、佣金以及其他改善访客体验或网站统计信息所需的信息的最有效方法。

有时，Cookie 也用于缓存，从而提高网站或应用程序的性能。

工作原理

您的服务器会以 Cookie 的形式向访客的浏览器发送一些数据。浏览器可能会接受该 Cookie。如果接受，它会以纯文本记录的形式存储在访客的硬盘上。现在，当访客访问您网站上的另一个页面时，浏览器会将相同的 Cookie 发送到服务器进行检索。检索到后，您的服务器就会知道/记住之前存储的内容。

Cookie 是包含 5 个可变长度字段的纯文本数据记录 -

• 过期日期 - Cookie 的过期日期。如果此字段为空，则 Cookie 将在访问者退出浏览器时过期。

• 域名 − 您网站的域名。

• 路径 − 设置 Cookie 的目录或网页的路径。如果您想从任何目录或页面检索 Cookie，则可以为空。

• 安全 − 如果此字段包含"安全"一词，则只能使用安全服务器检索 Cookie。如果此字段为空，则不存在此类限制。

• 名称=值 − Cookie 以键值对的形式设置和检索

Cookie 最初是为 CGI 编程设计的。 Cookie 中包含的数据会自动在 Web 浏览器和 Web 服务器之间传输，因此服务器上的 CGI 脚本可以读取和写入存储在客户端的 Cookie 值。

设置/存储 Cookie

JavaScript 可以使用 Document 对象的 cookie 属性来操作 Cookie。JavaScript 可以读取、创建、修改和删除应用于当前网页的 Cookie。

创建 Cookie 最简单的方法是将一个字符串值赋给 document.cookie 对象，如下所示。

document.cookie = "key1 = value1;key2 = value2;expires = date";

这里的 expires 属性是可选的。如果您为此属性指定了有效的日期或时间，则 Cookie 将在指定日期或时间过期，此后 Cookie 的值将无法访问。

Cookie 字符串包含由分号分隔的键值对。

注意 - Cookie 值不能包含分号、逗号或空格。因此，您可能需要在将值存储到 Cookie 之前使用 JavaScript escape() 函数对其进行编码。如果这样做，则在读取 Cookie 值时也必须使用相应的 unescape() 函数。

示例

尝试以下操作。它在输入 Cookie 中设置客户名称。

<html>
   <head>   
      <script type = "text/javascript">
         function WriteCookie() {
            if( document.myform.customer.value == "" ) {
               alert("Enter some value!");
               return;
            }
            cookievalue = escape(document.myform.customer.value) + ";";
            document.cookie = "name=" + cookievalue;
            document.write ("Setting Cookies : " + "name=" + cookievalue );
            }
      </script>      
   </head>
   
   <body>      
      <form name = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie();"/>
      </form>   
   </body>
</html>

输出

现在您的计算机有一个名为 name 的 Cookie。您可以使用多个键 = 值对(以逗号分隔)来设置多个 Cookie。

读取 Cookie

读取 Cookie 与写入 Cookie 一样简单，因为 document.cookie 对象的值就是 Cookie。因此，您可以在任何需要访问 Cookie 时使用此字符串。 document.cookie 字符串将保存一个以分号分隔的"name=value"对列表，其中 name 是 Cookie 的名称，value 是其字符串值。

您可以使用字符串的 split() 函数将字符串拆分为键和值，如下所示 -

示例

尝试以下示例以获取所有 Cookie。

<html>
   <head>   
      <script type = "text/javascript">
         function ReadCookie() {
            var allcookies = document.cookie;
            document.write ("All Cookies : " + allcookies );
              
            // 获取数组中的所有 cookies 对
            cookiearray = allcookies.split(';');
               
            // 现在从该数组中取出键值对
            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>     
      <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>

注意 - 此处 length 是 Array 类的一个方法，用于返回数组的长度。我们将在单独的章节中讨论数组。届时，请尝试理解它。

注意 - 您的计算机上可能已设置其他 Cookie。以上代码将显示您计算机上设置的所有 Cookie。

设置 Cookie 到期日期

您可以通过设置到期日期并将其保存在 Cookie 中，将 Cookie 的有效期延长至当前浏览器会话之后。可以通过将 expires 属性设置为日期和时间来实现。

示例

尝试以下示例。它演示了如何将 Cookie 的有效期延长 1 个月。

<html>
   <head>   
      <script type = "text/javascript">
         function WriteCookie() {
            var now = new Date();
            now.setMonth( now.getMonth() + 1 );
            cookievalue = escape(document.myform.customer.value) + ";"
            
            document.cookie = "name=" + cookievalue;
            document.cookie = "expires=" + now.toUTCString() + ";"
            document.write ("Setting Cookies : " + "name=" + cookievalue );
         }
      </script>      
   </head>
   
   <body>
      <form name = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
      </form>      
   </body>
</html>

输出

删除 Cookie

有时您需要删除某个 Cookie，以便后续读取该 Cookie 时不会返回任何结果。为此，您只需将到期日期设置为过去的某个时间即可。

示例

请尝试以下示例。它演示了如何通过将到期日期设置为当前日期后一个月来删除 Cookie。

<html>
   <head>   
      <script type = "text/javascript">
         function WriteCookie() {
            var now = new Date();
            now.setMonth( now.getMonth() - 1 );
            cookievalue = escape(document.myform.customer.value) + ";"
               
            document.cookie = "name=" + cookievalue;
            document.cookie = "expires=" + now.toUTCString() + ";"
            document.write("Setting Cookies : " + "name=" + cookievalue );
         }
      </script>      
   </head>
   
   <body>
      <form name = "myform" action = "">
         Enter name: <input type = "text" name = "customer"/>
         <input type = "button" value = "Set Cookie" onclick = "WriteCookie()"/>
      </form>      
   </body>
</html>

输出

更新 Cookie

要更新 Cookie 中的特定键值对，您可以将新的键值对分配给 document.cookie 属性。此时，您需要确保使用的键与要更新的值相同。

语法

请按照以下语法更新 Cookie。

document.cookie="key1=value1";

在上述语法中，我们更新了关键 cookie 的值。

示例

在下面的代码中，点击"设置 cookie"按钮来设置 cookie。它将设置 cartItem 的监视值，并将 price 的值设置为 10000。

之后，您可以点击"获取 cookie"按钮来观察 cookie。

接下来，您可以点击"更新 cookie"按钮来更新 cookie。它将 cartItem 的值更改为 bag，并将 price 更改为 5000。

现在，再次点击"获取 cookie"按钮以获取更新后的 cookie 值。

<html>
<body>
<p id = "output"> </p>
<button onclick = "setCookies()"> Set Cookie </button> <br> <br>
<button onclick = "updateCookies()"> Update Cookie </button> <br> <br>
<button onclick = "getCookies()"> Get Cookies </button>
<script>
let output = document.getElementById("output");
function setCookies() {
  document.cookie = "cartItem=watch";
  document.cookie = "price=10000";
}
function updateCookies() {
  // 更新 cookie
  document.cookie = "cartItem=bag"; 
  document.cookie = "price=5000";
}
function getCookies() {
  //拆分 cookie 字符串
  const allCookies = document.cookie.split("; "); 
  output.innerHTML = "The cookie data are : <br>";

  for (const cookie of allCookies) { 
    const [key, value] = cookie.split("="); 
    if (key == "cartItem" || key == "price") {
       output.innerHTML += `${key} : ${decodeURIComponent(value)} <br>`;
    }
  }
}
</script>
</body>
</html>