JavaScript进阶教程(第二课续)
人气:0
现在你已经掌握了先进的字符串处理和相关数组概念，该是我们打开神奇的cookie魔瓶的时候了．cookie是记录访问你的站点的人的信息，它其实驻留在用户的硬盘上，即使用户已经离开你的站点，cookie在用户的硬盘上仍然存在，如果该用户再次返回你的站点，则该cookie就会被一起发回到你的服务器中，便于你统计和处理重复到访者的信息．
下面我们看一看一个cookie应用的典型例子，我们在一个网页中设置cookie，然后通过别的网页读取它．在使用该例子的时候，想想如果没有cookie，你如何做到这一点．
由于cookies牵扯到向用户的硬盘写盘和读取信息，所以就涉及一个保密性的问题．cookie有其作用范围以及内在的局限性．其最重要的局限性在于：不是每个人的浏览器都欢迎cookies．即便是用户的浏览器欢迎cookies，但用户也有可能拒绝cookies的访问（大部分人还是欢迎的）每个域名只分配２０个cookies，所以要节省着什么它们．Cookies不得大于4 KB，当然4,000字节的容量是足够的了．
了解了这些局限性之后我们开始学习如何设置cookies.设置一个基本的cookie很容易．你所需做的只是在一个cookie_name=value
表单中生成一个字符串，然后设置document.cookie属性．唯一的技巧：cookie值中不能有空格，逗号或分号．好在你无需担心这些问题，因为有一系列的函数可以帮你对cookies属性编码和解码：
escape()和unescape()．
下面的简单例子中将你的姓名保存为一个cookie：
function setCookie()
{
var the_name = prompt("What's your name?","");
var the_cookie = "wm_javascript=username:" + escape(the_name);
document.cookie = the_cookie;
alert("Thanks, now go to the next page.");
}
函数中间的两行是关键：
var the_cookie = "wm_javascript=username:" + escape (the_name);
如果我在提示框中输入了"dave thau"，该行代码将生成一个字符串wm_javascript=username:dave%20thau．这就是说我将把一个名为wm_javascript的cookie保存到硬盘．该cookie的值是username:dave%20thau - 函数 escape()将"dave" 和"thau"之间的空格用%20做了替换．
当我们读取cookie时，我们寻找名为wm_javascript的cookie，然后提取username:dave%20thau，将其用 unescape()解码，去掉username:．
document.cookie = the_cookie;
cookie现在就设置好了，很简单．
一旦你在某用户的硬盘上设置了cookie，读取是件很容易的事．下面是读取cookie范例的代码：
function readCookie()
{
var the_cookie = document.cookie;
var broken_cookie = the_cookie.split(":");
var the_name = broken_cookie[1];
var the_name = unescape(the_name);
alert("Your name is: " + the_name);
}
第１行很重要．当你的浏览器打开一个网页时，它调用任何和该网页有关的cookie然后将其载入document.cookie属性．
读取cookie的技巧在于从中抽取出你需要的信息．注意在我们所设置的cookie是这样的：wm_javascript=username:dave%20thau．在该函数第１行之后的所有用于从该cookie中提取出用户名（username）．
var broken_cookie = the_cookie.split(":");
将cookie在分号处分割成两部分．
var the_name = broken_cookie[1];
抓取分号后面的内容dave%20thau．
var the_name = unescape(the_name);
取消函数escape()的编码替换．在本例中重新用空格替换了%20．
alert("Your name is: " + the_name);
显示你的姓名．
这个例子使用的cookie只保存了很少的信息：用户名，cookie最多可以保存多达4kb的信息。下一讲里我们讲要讲一个复杂的例子。
如果你想让你的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的内容．希望你能够多加练习。
下面我们看一看一个cookie应用的典型例子，我们在一个网页中设置cookie，然后通过别的网页读取它．在使用该例子的时候，想想如果没有cookie，你如何做到这一点．
由于cookies牵扯到向用户的硬盘写盘和读取信息，所以就涉及一个保密性的问题．cookie有其作用范围以及内在的局限性．其最重要的局限性在于：不是每个人的浏览器都欢迎cookies．即便是用户的浏览器欢迎cookies，但用户也有可能拒绝cookies的访问（大部分人还是欢迎的）每个域名只分配２０个cookies，所以要节省着什么它们．Cookies不得大于4 KB，当然4,000字节的容量是足够的了．
了解了这些局限性之后我们开始学习如何设置cookies.设置一个基本的cookie很容易．你所需做的只是在一个cookie_name=value
表单中生成一个字符串，然后设置document.cookie属性．唯一的技巧：cookie值中不能有空格，逗号或分号．好在你无需担心这些问题，因为有一系列的函数可以帮你对cookies属性编码和解码：
escape()和unescape()．
下面的简单例子中将你的姓名保存为一个cookie：
function setCookie()
{
var the_name = prompt("What's your name?","");
var the_cookie = "wm_javascript=username:" + escape(the_name);
document.cookie = the_cookie;
alert("Thanks, now go to the next page.");
}
函数中间的两行是关键：
var the_cookie = "wm_javascript=username:" + escape (the_name);
如果我在提示框中输入了"dave thau"，该行代码将生成一个字符串wm_javascript=username:dave%20thau．这就是说我将把一个名为wm_javascript的cookie保存到硬盘．该cookie的值是username:dave%20thau - 函数 escape()将"dave" 和"thau"之间的空格用%20做了替换．
当我们读取cookie时，我们寻找名为wm_javascript的cookie，然后提取username:dave%20thau，将其用 unescape()解码，去掉username:．
document.cookie = the_cookie;
cookie现在就设置好了，很简单．
一旦你在某用户的硬盘上设置了cookie，读取是件很容易的事．下面是读取cookie范例的代码：
function readCookie()
{
var the_cookie = document.cookie;
var broken_cookie = the_cookie.split(":");
var the_name = broken_cookie[1];
var the_name = unescape(the_name);
alert("Your name is: " + the_name);
}
第１行很重要．当你的浏览器打开一个网页时，它调用任何和该网页有关的cookie然后将其载入document.cookie属性．
读取cookie的技巧在于从中抽取出你需要的信息．注意在我们所设置的cookie是这样的：wm_javascript=username:dave%20thau．在该函数第１行之后的所有用于从该cookie中提取出用户名（username）．
var broken_cookie = the_cookie.split(":");
将cookie在分号处分割成两部分．
var the_name = broken_cookie[1];
抓取分号后面的内容dave%20thau．
var the_name = unescape(the_name);
取消函数escape()的编码替换．在本例中重新用空格替换了%20．
alert("Your name is: " + the_name);
显示你的姓名．
这个例子使用的cookie只保存了很少的信息：用户名，cookie最多可以保存多达4kb的信息。下一讲里我们讲要讲一个复杂的例子。
如果你想让你的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的内容．希望你能够多加练习。
加载全部内容