JavaScript进阶教程(第二课续)

如果你想让你的cookie包含更多的信息，你可以将cookie的值设得很长．假设我们要保存某人的姓名，年龄和电话号码：

    var the_cookie = "username:thau/age:older than the hills/phone:411";

    document.cookie="my_happy_cookie=" + escape(the_cookie);

    我用斜杠／来分割属性名称，用分号区别不同的属性名称及其属性值．斜杠／和分号是不是绝对的选择，你可以使用任何的字符做分割的标志，比如：

    var the_cookie = "username=thau&age=older than the hills&phone=411";

    document.cookie="my_happy_cookie=" + escape(the_cookie);

    你可以自行选择限位器．只要你注意在对cookie解码时也使用同样的限位器即可．

    设置复杂的cookie时方法要复杂一些．我们建议你使用相关数组来保存所有的信息，假设我们将该cookie保存到某人的硬盘上：

    my_happy_cookie=username:thau/age:older than the hills/phone:411

    你可以将这些信息放到一个方便的相关数组中：

    function readTheCookie(the_info)
    {
        // load the cookie into a variable and unescape it
        var the_cookie = document.cookie;
        the_cookie = unescape(the_cookie);

        // separate the values from the cookie name
        var broken_cookie = the_cookie.split("=");
        var the_values = broken_cookie[1];

        // break each name:value pair into an array
        var separated_values = the_values.split("/");

        // loop through the list of name:values and load
        // up the associate array

        var property_value = "";

        for (loop=0; loop<separated_values.length; loop++) {
            property_value = separated_values[loop];
            var broken_info = property_value.split(":");
            var the_property = broken_info[0];
            var the_value = broken_info[1];
            the_info[the_property] = the_value;
        }
    }


    如果在你的JavaScript中有上面这段代码，你可以这样调用它：

    var cookie_information = new Array();

    readTheCookie(cookie_information);

    然后你就会正确设置了cookie_information["username"],cookie_information["age"], 和cookie_information["phone"]．

    这些看起来可能有些难以理解，但实际上并不是很难．我们一步步分析：

    var the_cookie = document.cookie; 
    将cookie赋值给一个变量．

    var the_cookie = unescape(the_cookie); 
    取消escape()的编码

    var broken_cookie = the_cookie.split("=");
    var the_values = broken_cookie[1]; 
    使the_values等同于username:thau/age:older than the hills/phone:411. 

    var separated_values = the_values.split("/"); 
    生成一个包含３个元素名为separated_values的数组：

    separated_values[0] = "username:thau"
    separated_values[1] = "age:older than the hills"
    separated_values[2] = "phone:411"

    for (loop=0; loop<separated_values.length; loop++) {
        property_value = separated_values[loop];
        var broken_info = property_value.split(":");
        var the_property = broken_info[0];
        var the_value = broken_info[1];
        the_info[the_property] = the_value;
    }
    循环调用separated_values的３个元素．

    property_value = separated_values[loop]; 
    提取当前的name:value配对，第１个配对是username:thau．

    var broken_info = property_value.split(":"); 
    将该配对分成名为broken_info的数组中的两个元素：

    broken_info[0] = "username"
    broken_info[1] = "thau"

    var the_property = broken_info[0]; 
    第１次经过这个循环是，the_property是"username" 
    var the_value = broken_info[1]; 
    其值是"thau"

    the_info[the_property] = the_value; 
    这里开始发回相关数组的便捷功能．它使得the_info["username"] = "thau"，所以现在当你需要从cookie中查找username时你只需：

    var the_name = the_info["username"];

    每次经过这个循环时，就在the_info中加入一个新元素．循环到最后时，
    the_info["username"] = "thau",
    the_info["age"] = "old as the hills" ，
    而 the_info["phone"] = 411．

    有些烦琐，但是当你需要从cookie中输出入大量信息时这是一个很好的办法．当然还有别的办法．那就是使用多重cookies．

    保存多重cookies的方法很直观．每一个cookie都有一个名称．上一个例子中的cookie的名称是my_happy_cookie，我们可以这样：

    var the_cookie ="my_happy_cookie=happiness_and_joy";

    document.cookie =the_cookie;

    要保存多重cookie，只需给每个cookie一个不同的名字．如果你要加入一个新的cookie，设置document.cookie时并不会删除前面已经设置了的cookies，所以：

    var the_cookie ="my_happy_cookie=happiness_and_joy";

    document.cookie = the_cookie;

    var another_cookie= "my_other_cookie=more_joy_more_happiness";

    document.cookie = another_cookie;

    现在你需要访问这两个cookies，有些复杂，所以你需要明了整个过程．假设你执行了上面的代码，现在想访问my_happy_cookie．如果你查看document.cookie的内容，你会看到：

    my_happy_cookie=happiness_and_joy;
    my_other_cookie=more_joy_more_happiness;

    这样很直观，但是如果你想访问某个特定的cookie则有些困难．下面的代码可以帮助你找出某个特定的cookie：

    function WM_readCookie(name)
    {
        //如果没有cookie则返回false或者取得值并返回该值
        if(document.cookie == '')
            return false;
        else
            return unescape(WM_getCookieValue(name));
    }

    function WM_getCookieValue(name)
    {
        // Declare variables.
        var firstChar,lastChar;

        // Get the entire cookie string.
        // (This may have other name=value pairs in it.)
        var theBigCookie = document.cookie;

        // Grab just this cookie from theBigCookie string.
        // Find the start of 'name'.
        firstChar = theBigCookie.indexOf(name);

        // If you found it,
        if(firstChar != -1)
        {
            // skip 'name' and '='.
            firstChar += name.length + 1;

            // Find the end of the value string (i.e. the next';').
            lastChar = theBigCookie.indexOf(';', firstChar);

            if(lastChar == -1) lastChar = theBigCookie.length;

            // Return the value.
            return theBigCookie.substring(firstChar, lastChar);
        }
        else
        {
            // If there was no cookie, return false.
            return false;
        }
    }

    下面我们将学习一下cookies可以做的真正酷的内容。

    现在你已经学会了如何设置和读取基本的cookie．然而基本的cookie常常在用户关闭他的浏览器时会被自动删除．有时候这样最好因为通常的域只允许在用户的机器上保留20个cookie．但是如果你希望将cookie保存在用户的机器上你需要设置一个cookie失效的时间，它的格式是一种叫做GMT的特殊格式．例如：

    Mon, 27-Apr-1998 00:00:00 GMT

    要正确设置GMT不是一件容易的事，你需要计算好某个日期是星期几．好在Javascript有一个日期的方法叫做toGMTString可以帮助你．下面是设定远期的某个时间的一个例子：

    var the_date = new Date("December 31, 2023");

    var the_cookie_date =the_date.toGMTString();

    一旦你设置了你的cookie的失效期，你在必须在cookie设置的前面加入这条信息．因此你的cookie应该如下：

    cookie_name=blah_blah;expires=date

    通常你只需在cookie字符串中加入expires=date，然后用分号分割不同的cookie．

    下面是一个如何建立有效期直至Mayan日历末尾的函数：

    function setCookie()
    {
        // get the information
        var the_name = prompt("What's your name?","");
        var the_date = new Date("December 31, 2023");
        var the_cookie_date =the_date.toGMTString();

        // build and save the cookie
        var the_cookie = "my_cookie=" + escape(the_name);
        the_cookie = the_cookie +";expires=" + the_cookie_date;
        document.cookie = the_cookie;
    }

    最后cookie应该如下所示：

    my_cookie=thau;expires=Fri,31-Dec-2023 00:00:00 GMT

    设置好cookie之后，它将在用户的机器中存在直到失效期．如果你将某个cookie的失效期设置得比当前时间还早，该cookie实际上不能在用户的机器上存活．

    此外，还有两个注意的事项：路径（path）和域（domain）。

    这是掌握cookie最后的一个障碍：缺省情况下cookie只能被在同一个Web服务器上同一个路径下设置了该cookie的网页读取．例如，如果在"http://chimp.webmonkey.com/food/bananas/banana_puree.htm"有一段Javascript询问了用户的姓名，你可能需要在你的另一个网页例如主页中访问一个给定的名字．所以你必须设定该cookie的路径．路径"path"用于设置可以读取一个cookie的最顶层的目录．将cookie的路径设置为你的网页最顶层的目录可以让该该目录下的所有网页都能访问该cookie．

    方法：在你的cookie中加入path=/; 如果你只想让"food" 目录中的网页可以使用该cookie，则你加入path=/food;．还有一点：有些网站有许多小的域名，例如网猴可能还在"chimp.webmonkey.com," "gorilla.webmonkey.com," 和"ape.webmonkey.com." 域名下有网页．缺省情况下只有"chimp.webmonkey.com" 域下的网页可以读取该cookie．如果你向让"webmonkey.com"下的所有机器都可以读取该cookie，我们必须在cookie中加入 "domain=webmonkey.com" ．

    要将一个cookie设置在"http://chimp.webmonkey.com/food/bananas/banana_puree.htm"并且让所有网猴的网页都可以利用它，我们可以这样：

    function setCookie()
    {
        var the_name = prompt("What's your name?","");
        var the_cookie = "cookie_puss=" + escape(the_name) + ";" ;
        var the_cookie = the_cookie + "path=/;";
        var the_cookie = the_cookie + "domain=webmonkey.com;";
        document.cookie = the_cookie;
    }

    现在我们已经学习完了cookie的内容．希望你能够多加练习。

最新评论