JavaScript和Cookies

什么是Cookies?

Web浏览器和服务器使用HTTP协议进行通信，HTTP是一种无状态协议。但对于商业网站而言，需要在不同页面之间维护会话信息。例如，一次用户注册需要完成多个页面，但如何在所有网页中维护用户的会话信息。

在许多情况下，使用cookies是记住和跟踪偏好、购买、佣金和其他信息以提供更好的访问者体验或网站统计信息的最有效方法。

它如何工作?

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

Cookies是一个5个可变长度字段的纯文本数据记录−

Expires − cookie将过期的日期。如果这是空白的，cookie将在访问者退出浏览器时过期。
Domain − 您网站的域名。
Path − 设置cookie的目录或网页的路径。如果您希望从任何目录或页面检索cookie，则可以将其留空。
Secure − 如果该字段包含单词“secure”，则cookie只能与安全服务器一起检索。如果该字段为空，则不存在这种限制。
Name=Value − cookie以键值对的形式设置和检索。

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

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

存储Cookies

创建cookie的最简单方法是将一个字符串值分配给document.cookie对象，它看起来像这样。

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

这里 Expires 属性是可选的。如果您提供了有效的日期或时间，那么cookie将在给定的日期或时间到期，此后，cookie的值将无法访问。

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

示例

尝试以下操作。它将客户名称设置为输入cookie。

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function WriteCookie() {
               if( document.myform.customer.value == "" ) {
                  alert("请输入值！");
                  return;
               }
               cookievalue = escape(document.myform.customer.value) + ";";
               document.cookie = "name=" + cookievalue;
               document.write ("设置Cookie : " + "name=" + cookievalue );
            }

            function ReadCookie() {
               var allcookies = document.cookie;
               document.write ("所有Cookie : " + allcookies );

               // 获取一个Cookie对。将所有Cookie对存入数组中
               cookiearray = allcookies.split(';');

               // 取出键值对
               for(var i=0; i<cookiearray.length; i++) {
                  name = cookiearray[i].split('=')[0];
                  value = cookiearray[i].split('=')[1];
                  document.write ("键为 : " + name + "； 值为 : " + value);
               }
            }
         //-->
      </script>      
   </head>

   <body>      
      <form name = "myform" action = "">
         输入名称: <input type = "text" name = "customer"/>
         <input type = "button" value = "写入Cookie" onclick = "WriteCookie();"/>
         <p> 点击下面按钮查看结果:</p>
         <input type = "button" value = "读取Cookie" onclick = "ReadCookie()"/>
      </form>   
   </body>
</html>

输出

JavaScript和Cookies

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

读取Cookie

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

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

案例

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

<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function ReadCookie() {
               var allcookies = document.cookie;
               document.write ("所有Cookie : " + allcookies );

               // 获取一个Cookie对。将所有Cookie对存入数组中
               cookiearray = allcookies.split(';');

               // 取出键值对
               for(var i=0; i<cookiearray.length; i++) {
                  name = cookiearray[i].split('=')[0];
                  value = cookiearray[i].split('=')[1];
                  document.write ("键为 : " + name + "； 值为 : " + value);
               }
            }
         //-->
      </script>      
   </head>

   <body>     
      <form name = "myform" action = "">
         <p> 点击下面按钮并查看结果:</p>
         <input type = "button" value = "读取Cookie" onclick = "ReadCookie()"/>
      </form>      
   </body>
</html>

注意：在此处， length 是数组类的一个方法，它返回一个数组的长度。有关数组的更多信息，请参见单独的章节。

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

设置Cookie的失效日期

您可以通过设置“expires”属性为一个日期和时间，将Cookie的生命期延长到当前浏览器会话之外，并在Cookie中保存失效日期。下面的例子演示了如何将Cookie的有效期限扩展一个月。

示例

尝试以下示例，它演示了如何将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 ("设置Cookies: " + "name=" + cookievalue );
            }
         //-->
      </script>      
   </head>

   <body>
      <form name = "myform" action = "">
         输入名称: <input type = "text" name = "customer"/>
         <input type = "button" value = "设置Cookie" onclick = "WriteCookie()"/>
      </form>      
   </body>
</html>

输出

JavaScript和Cookies

删除Cookie

有时您会希望删除Cookie，以便随后尝试读取Cookie时返回null。为此，您只需将到期日设置为过去的时间即可。

示例

请尝试以下示例。它演示了如何通过将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("删除Cookie : " + "name=" + cookievalue );
            }
          //-->
      </script>      
   </head>

   <body>
      <form name = "myform" action = "">
         输入名称: <input type = "text" name = "customer"/>
         <input type = "button" value = "设置Cookie" onclick = "WriteCookie()"/>
      </form>      
   </body>
</html>