JavaScript and Cookies

Cookies 是什么？

Web 浏览器与服务器之间利用 HTTP 协议进行通信，而且 HTTP 是一种无状态的协议类型。但是对于商业网站，它通常需要维护一些与客户端在不同网页交互的信息。例如，一个用户在很多网页中填写信息后完成了注册，此时应该如何维护(或者缓存)众多网页中用户的信息。

在很多情况下，利用 Cookies 是最有效的方式，通过这种方式可以记录和跟踪一些用户的偏好，购物车，工资，和其他的信息，而利用这些信息可以更好的了解用户经历或者进行网站统计。

它是如何的起作用的？

服务器以 Cookies 的形式发送一些数据给访问者的浏览器。浏览器可以选择接收这些 Cookies。如果它被接收了，它就会被以纯文本的形式存储在访问者的硬盘中。接着，当访问者访问网站中的另外一个网页时，那些被缓存的 Cookies 会被发送到服务器进行检索。一旦服务器在服务端检索到该 Cookies 信息，服务器就会知道访问者本地已经缓存了的数据。

Cookies 是纯文本数据，记录了 5 个可变长度的字段：

  • Expires： 这个字段记录 Cookies 有效时间长度。如果这个字段为空，该 Cookies 将会在用户关闭浏览器时过期，即该 Cookies 的数据不再可用。
  • Domain: 这个字段记录网站名。
  • Path: 这个字段记录设置 Cookies 的目录或者网页的路径。如果你想在任何目录或网页里面等够检索到 Cookies 数据这个字段可以被设置为空。
  • Secure: 如果这个字段包含”secure”这个单词，那么 Cookies 仅仅只能被安全服务器进行检索。如果这个字段为空，就没有前面的限制。
  • Name=Value: Cookies 以键值对的形式进行赋值和检索。

Cookies 最初是为 CGI 编程提供的，并且 Cookies 数据在网页浏览器和服务器之间是自动的传输的，因此服务器端的 CGI 脚本能够读写存储在客户端的 Cookies。

JavaScript 通过使用 Document 对象的 Cookies 属性同样可以操作 Cookies。JavaScript 可以读、创建、修改、和删除 Cookie，或者那些应用于当前网页的 Cookies。

Cookies 的存储：

创建 Cookie 最简单的方式就是给 document.cookie 对象赋值一个字符串值，它的语法如下：

语法:

  1. document.cookie = "key1=value;key2=value2;expires=date";

这里的 expires 属性字段是可选的。如果你给它提供一个有效的日期或者时间值，Cookie 将会在你给定的日期或时间达到时过期，并且这之后 Cookie 的属性值都会变的不可访问。

注意:

Cookie 的值不包括分号，逗号或者空格。因此，在存储 Cookie 之前，你可能需要利用 JavaScript 提供的 escape() 函数来对其值进行转义。如果你按照那样做的话，当你读取 Cookie 的值时，你就需要利用相应的 unescape() 函数。

例子：

下面是一个将用户的名称记录在 Cookie 的例子。

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. <!--
  5. function WriteCookie()
  6. {
  7.    if( document.myform.customer.value == "" ){
  8.       alert("Enter some value!");
  9.       return;
  10.    }
  12.    cookievalue= escape(document.myform.customer.value) + ";";
  13.    document.cookie="name=" + cookievalue;
  14.    alert("Setting Cookies : " + "name=" + cookievalue );
  15. }
  16. //-->
  17. </script>
  18. </head>
  19. <body>
  20. <form name="myform" action="">
  21. Enter name: <input type="text" name="customer"/>
  22. <input type="button" value="Set Cookie" onclick="WriteCookie();"/>
  23. </form>
  24. </body>
  25. </html>

上面代码执行效果如下。当在文本框中输入文字并且点击了 “Set Cookie” 按钮就可以设置 Cookie。

现在你的机器中存在一个名称为 name 的 Cookie。你可以利用多个 key = value 键值对，他们之间用逗号分开，这样来设置多个 Cookie 信息。

读取 Cookies：

读取 Cookie 就像写它一样简单，因为 document.cookie 对象的值就是 Cookie 的属性值。因此你可以利用这个字符串在任何时候对 Cookie 进行访问。

document.cookie 字符串会保存一系列用分号分开的 name = value 键值对，这里的 name 就是一个 Cookie 名称，value 是它的值。

你可以利用 split() 函数将字符串分解成如下形式的 key 和 value：

例子：

下面的是读取前面一节设置的 Cookie 信息。

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. <!--
  5. function ReadCookie()
  6. {
  7.    var allcookies = document.cookie;
  8.    alert("All Cookies : " + allcookies );
  10.    // Get all the cookies pairs in an array
  11.    cookiearray  = allcookies.split(';');
  13.    // Now take key value pair out of this array
  14.    for(var i=0; i<cookiearray.length; i++){
  15.       name = cookiearray[i].split('=')[0];
  16.       value = cookiearray[i].split('=')[1];
  17.       alert("Key is : " + name + " and Value is : " + value);
  18.    }
  19. }
  20. //-->
  21. </script>
  22. </head>
  23. <body>
  24. <form name="myform" action="">
  25. <input type="button" value="Get Cookie" onclick="ReadCookie()"/>
  26. </form>
  27. </body>
  28. </html>

注意：

这里的 length 是 Array 类型的一个方法，该方法返回一个数组的长度。我们会在一个单独的章节再讨论数组类型。在那个时候请再好好理解这个方法。

上面的代码会有如下的效果。当你按下 “Get Cookie” 按钮，你就会看到你在上一节设置的 Cookie 信息。

注意：

在你的机器上可能已经存在一些其他的 Cookie。因此上面的代码会显示存储在你的机器上所有的 Cookies 信息。

设置 Cookies 有效日期：

你可以设置有效日期并且将该有效日期与 Cookie 进行绑定，从而可以延长 Cookie 的生存时间超过当前浏览器的会话。这个可以为 expires 属性赋值一个日期或者时间来实现。

例子：

下面的代码说明怎样设置让 Cookie 在一个月之后失效：

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. <!--
  5. function WriteCookie()
  6. {
  7.    var now = new Date();
  8.    now.setMonth( now.getMonth() + 1 ); 
  9.    cookievalue = escape(document.myform.customer.value) + ";"
  10.    document.cookie="name=" + cookievalue;
  11.    document.cookie = "expires=" + now.toUTCString() + ";"
  12.    alert("Setting Cookies : " + "name=" + cookievalue );
  13. }
  14. //-->
  15. </script>
  16. </head>
  17. <body>
  18. <form name="formname" action="">
  19. Enter name: <input type="text" name="customer"/>
  20. <input type="button" value="Set Cookie" onclick="WriteCookie()"/>
  21. </form>
  22. </body>
  23. </html>

删除一个 Cookie

有时你想要删除一个 Cookie，从而下次尝试读取 Cookie 信息时会返回一个空值。为了实现这个，你可以设置 Cookie 的有效生存时间为过去的某个时间的即可。

例子:

下面的代码说明如何将一个 Cookie 的有效时间设置为过去的一个月来删除 Cookie。

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. <!--
  5. function WriteCookie()
  6. {
  7.    var now = new Date();
  8.    now.setMonth( now.getMonth() - 1 ); 
  9.    cookievalue = escape(document.myform.customer.value) + ";"
  10.    document.cookie="name=" + cookievalue;
  11.    document.cookie = "expires=" + now.toUTCString() + ";"
  12.    alert("Setting Cookies : " + "name=" + cookievalue );
  13. }
  14. //-->
  15. </script>
  16. </head>
  17. <body>
  18. <form name="formname" action="">
  19. Enter name: <input type="text" name="customer"/>
  20. <input type="button" value="Set Cookie" onclick="WriteCookie()"/>
  21. </form>
  22. </body>
  23. </html>

注意：

除了设置日期你还可以利用 setTime() 方法来实现设置有效时间。