• 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. }
    11. cookievalue= escape(document.myform.customer.value) + ";";
    12. document.cookie="name=" + cookievalue;
    13. alert("Setting Cookies : " + "name=" + cookievalue );
    14. }
    15. //-->
    16. </script>
    17. </head>
    18. <body>
    19. <form name="myform" action="">
    20. Enter name: <input type="text" name="customer"/>
    21. <input type="button" value="Set Cookie" onclick="WriteCookie();"/>
    22. </form>
    23. </body>
    24. </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 );
    9. // Get all the cookies pairs in an array
    10. cookiearray = allcookies.split(';');
    11. // Now take key value pair out of this array
    12. for(var i=0; i<cookiearray.length; i++){
    13. name = cookiearray[i].split('=')[0];
    14. value = cookiearray[i].split('=')[1];
    15. alert("Key is : " + name + " and Value is : " + value);
    16. }
    17. }
    18. //-->
    19. </script>
    20. </head>
    21. <body>
    22. <form name="myform" action="">
    23. <input type="button" value="Get Cookie" onclick="ReadCookie()"/>
    24. </form>
    25. </body>
    26. </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。

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