• JavaScript and Cookies
  • Cookies 是什么？
  • 它是如何的起作用的？
  • Cookies 的存储：
    • 语法:
      • 注意:
    • 例子：
    • 读取 Cookies：
    • 例子：
    • 注意：
    • 注意：
  • 设置 Cookies 有效日期：
    • 例子：
  • 删除一个 Cookie
    • 例子:
    • 注意：

    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() 方法来实现设置有效时间。