17.2 存取Cookie
创建Cookie的方式与定义一个变量的方式有些类似,都必须使用Cookie名和Cookie值。同一个网站可以创建多个Cookie,而多个Cookie可以存放在同一个Cookie文件中。使用Document对象的cookie属性可以设置一个Cookie,也可以从一个Cookie文件中读取所有的Cookie内容。
17.2.1 存取Cookie的方法
在JavaScript中存取Cookie时,必须要使用Document对象的cookie属性。创建或修改一个Cookie的语法代码如下所示:
document.cookie = "name=value"
在以上代码中,name为Cookie名,value为Cookie值。如果要创建多个Cookie,可以多次使用以上代码。使用Document对象的cookie属性,也可以读取Cookie文件中的Cookie信息。如以下代码所示:
var cookies = document.cookie
在以上代码中,cookies为变量名,document.cookie可以取得整个Cookie文件中的信息,因此,变量cookies有可能会包括多个Cookie的信息。
17.2.2 创建与读取Cookie
使用Document对象的cookie属性可以创建和读取Cookie。其具体实现方法如代码清单17-1所示,请注意加粗的文字。
代码清单17-1 创建与读取Cookie
<html> <head> <title>创建与读取Cookie</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <script language="javascript" type="text/javascript"> <!-- //设置Cookie function setCookie() { var userName = myForm.myName.value; var userPassword = myForm.myPassword.value; //添加或修改第一个Cookie,该Cookie名为cookieUserName,值 //为“姓名”文本框中的内容 document.cookie = "cookieUserName="+userName; //添加或修改第二个Cookie,该Cookie名为cookieUserPassword, //值为密码框中的内容 document.cookie = "cookieUserPassword="+userPassword; } //读取Cookie function getCookie() { //获得Cookie文件中的信息 var cookieMesaage = document.cookie; alert(cookieMesaage); } --> </script> </head> <body> <form name="myForm"> 姓名:<input type="text" name="myName"><br> 密码:<input type="password" name="myPassword"><br> <input type="button" value="设置Cookie" onclick="setCookie()"> <input type="button" value="读取Cookie" onclick="getCookie()"> </form> </body> </html>
上述代码为光盘目录里“代码\第17章\sample01.htm”的内容,本例的关键知识点如下所示:
(1)创建了一个文本框,一个密码框和两个按钮。
(2)单击【设置Cookie】按钮时,调用setCookie()函数。在该函数中,先获取文本框和密码框中的文字,然后使用以下代码添加一个Cookie。
document.cookie = "cookieUserName="+userName;
在以上代码中,Cookie名为“cookieUserName”,Cookie值为文本框中的内容。
(3)然后使用以下代码创建另一个Cookie,该Cookie名为“cookieUserPassword”,值为密码框中的内容。
document.cookie = "cookieUserPassword="+userPassword;
(4)单击【读取Cookie】按钮时,调用getCookie()函数。在该函数中,使用以下代码获取Cookie文件中的所有信息。
var cookieMesaage = document.cookie;
(5)然后使用alert()方法,将变量cookieMesaage的值输出,如图17-1所示。从图17-1中可以看出,Cookie文件中记录了两个Cookie的名称和值。
图17-1 sample01.htm的运行结果
在默认情况下,只要打开sample01.htm文件的浏览器窗口还没有关闭时,Cookie就会一直存在,同一网站上的其他网页也可以读取该Cookie。代码清单17-2就是一段读取Cookie内容的代码,请注意加粗的文字。
代码清单17-2 读取Cookie
<html> <head> <title>读取Cookie</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <script language="javascript" type="text/javascript"> <!-- var cookieMesaage = document.cookie; if (cookieMesaage=="") { document.write("没有获得Cookie值,请确认sample01.htm文 件是否打开"); } else { document.write("Cookie文件中的内容为:<br>",cookie- Mesaage); } --> </script> </head> <body> </body> </html>
上述代码为光盘目录里“代码\第17章\sample02.htm”的内容。如果打开sample01.htm的浏览器窗口而且还没有关闭,那么该文件可以读取sample01.htm文件所创建的Cookie,如图17-2所示。如果打开sample01.htm的浏览器窗口已经关闭,则该文件读取的Cookie内容为空,那么运行该文件的结果如图17-3所示。
图17-2 没有关闭sample01.htm窗口时的运行结果
图17-3 关闭sample01.htm窗口时的运行结果
17.2.3 精确读取Cookie值
从上例中可以看出,使用document.cookie获得的是整个Cookie文件中的内容,因此,很有可能会包括多个Cookie的内容。如果要精确获取某个Cookie的值,就必须要使用String对象中的一些方法。在图17-2中,整个Cookie文件中的内容如下所示:
cookieUserName=张三; cookieUserPassword=123456
以上内容包括了cookieUserName和cookieUserPassword两个Cookie的名和值,如果要获得其中一个Cookie的值,具体实现步骤如下所示:
(1)使用document.cookie获得整个Cookie文件的内容。
(2)如果要获得某个Cookie的值,可以使用String对象的substring()方法来截取该Cookie值的某一部分。以cookieUserName为例,就必须要截取从“张三”开始到“;”为止这部分的子字符串。
(3)要获得某个指定的Cookie值,就必须要获得Cookie值的开始和结束位置。由于Cookie值是不固定的,而Cookie名是固定的,所以可以先获得Cookie名的开始位置,以cookieUserName为例,就必须要获得子字符串“cookieUserName=”在整个字符串的位置。之所以要加上“=”,是为了防止某个Cookie的值中正好包含了“cookieUserName”字符串。
(4)获得了Cookie名的开始位置之后,可以通过Cookie名的开始位置加上Cookie名的长度再加上1(即加上了“=”的位置)的方法来获得Cookie值的开始位置。
(5)获得了Cookie值的开始位置之后,还必须要知道Cookie值的结束位置才可以使用String对象的substring()方法来截取Cookie值。
(6)获得Cookie值的结束位置有两种情况:
第一种情况是该Cookie值之后还有Cookie,那么就要从该Cookie值的开始位置查找,第一个“;”出现的位置就是Cookie值的结束位置。
第二种情况是该Cookie值之后没有其他Cookie了,那么该Cookie值的结束位置也就是整个Cookie内容的最后位置,可以通过Cookie内容的长度来获得该结束位置。
(7)最后使用String对象的substring()方法来获得Cookie的值。
代码清单17-3显示了如何精确读取Cookie的值,请注意加粗的文字。
代码清单17-3 精确读取Cookie值
<html> <head> <title>精确读取Cookie值</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <script language="javascript" type="text/javascript"> <!-- //设置Cookie function setCookie() { var userName = myForm.myName.value; var userPassword = myForm.myPassword.value; //添加或修改第一个Cookie,该Cookie名为cookieUserName,值 //为“姓名”文本框中的内容 document.cookie = "cookieUserName="+userName; //添加或修改第二个Cookie,该Cookie名为cookieUserPassword, //值为密码框中的内容 document.cookie = "cookieUserPassword="+userPassword; } function getCookie(cookieName) { //获得Cookie文件中的信息 var cookieMesaage = document.cookie; var cookieValue = ""; //获得Cookie值 if (cookieName=="myName") { cookieValue = returnCookieValue(cookieMesaage, "cookieUserName") alert("姓名为:"+cookieValue); } else if (cookieName=="myPassword") { cookieValue = returnCookieValue(cookieMesaage, "cookieUserPassword") alert("密码为:"+cookieValue); } } //该函数用于返回某个Cookie的值 //cookieValue为整个Cookie文件的内容 //cookieName为要获得值的Cookie名 function returnCookieValue(cookieValue,cookieName) { //设置返回值 var returnCookieValue = ""; //查找Cookie名在整个Cookie文件内容中的位置 var cookieNameIndex = cookieValue.indexOf(cookie- Name+"="); //如果在Cookie文件内容中找到Cookie名,则进一步查找该Cookie //的值 if (cookieNameIndex!=-1) { //查找Cookie值在Cookie文件内容中的位置。 //该位置为Cookie名的位置加上Cookie名的长度,再加上“=” //号的长度,即1 var cookieValueBeginIndex = cookieNameIndex + cookieName.length + 1; //查找Cookie值在Cookie文件内容中的位置。 //该位置为从Cookie名的位置开始到第一个“;”为止 var cookieVlaueEndIndex = cookieValue.indexOf(";", cookieValueBeginIndex); //如果从Cookie名的位置开始到整个Cookie文件内容的最后都 //没有找到“;”,那么Cookie值的结束位置就是整个Cookie //内容的最后 if (cookieVlaueEndIndex==-1) { cookieVlaueEndIndex = cookieValue.length; } //通过Cookie值的开始位置和结束位置获得Cookie值 returnCookieValue = cookieValue.substring (cookieValueBeginIndex,cookieVlaueEndIndex); } //返回Cookie值 return returnCookieValue; } --> </script> </head> <body> <form name="myForm"> 姓名:<input type="text" name="myName"><br> 密码:<input type="password" name="myPassword"><br> <input type="button" value="设置Cookie" onclick="setCookie()" ><br> <input type="button" value="读取Cookie中的姓名" onclick= "getCookie('myName')"> <input type="button" value="读取Cookie中的密码" onclick= "getCookie('myPassword')"> </form> </body> </html>
上述代码为光盘目录里“代码\第17章\sample03.htm”的内容。本例修改了代码清单17-1中的代码,添加了两个按钮,单击这两个按钮可以获得不同的Cookie的值。如图17-4为单击【读取Cookie中的姓名】按钮后的结果。
图17-4 sample03.htm的运行结果
17.2.4 通过数组来读取Cookie值
除了使用17.2.3小节中的方法读取Cookie值之外,还可以使用数组的方法来读取Cookie值。再看一下在图17-2中,整个Cookie文件中的内容如下所示:
cookieUserName=张三; cookieUserPassword=123456
从以上代码中可以看出,一个Cookie文件中,将不同的Cookie使用“; ”号作为分隔符进行分隔(分号后还有一个空格)。而每个Cookie中,使用“=”作为分隔符,“=”左侧是Cookie名,“=”右侧是Cookie值。那么通过String对象的split()方法,可以很容易将以上代码分割成数组,分割需要分两步进行,步骤如下所示:
(1)使用split(“;”)将整个Cookie内容分割成一个数组,该数组中每个元素都是一个Cookie(包括Cookie名、“=”号、Cookie值)。经过这一步可以得到的数组如下所示:
Arr[0] = "cookieUserName=张三"
Arr[1] = "cookieUserPassword=123456"
(2)从以上代码中可以看出,数组中的每一个元素都包括了Cookie名和Cookie值,这种格式并不利于Cookie值的查询,因此,还需要对Arr[]数组中的每一个元素进行分割。这次分割可以使用split(“=”)方法。然后得到一个二维数组,如以下代码所示:
myArr[0][0] = "cookieUserName" myArr[0][1] = "张三" myArr[1][0] = "cookieUserPassword" myArr[1][1] = "123456"
最后,可能通过循环来判断myArr[i][0]的值是否与Cookie名的值相同,如果相同,那么myArr[i][1]的值就是Cookie的值。其具体实现过程如代码清单17-4所示,请注意加粗的文字。
代码清单17-4 精确读取Cookie值
<html> <head> <title>精确读取Cookie值</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <script language="javascript" type="text/javascript"> <!-- //设置Cookie function setCookie() { var userName = myForm.myName.value; var userPassword = myForm.myPassword.value; //添加或修改第一个Cookie,该Cookie名为cookieUserName,值 //为“姓名”文本框中的内容 document.cookie = "cookieUserName="+userName; //添加或修改第二个Cookie,该Cookie名为cookieUserPassword, //值为密码框中的内容 document.cookie = "cookieUserPassword="+userPassword; } function getCookie(cookieName) { //获得Cookie文件中的信息 var cookieMesaage = document.cookie; var cookieValue = ""; //获得Cookie值 if (cookieName=="myName") { cookieValue = returnCookieValue(cookieMesaage, "cookieUserName") alert("姓名为:"+cookieValue); } else if (cookieName=="myPassword") { cookieValue = returnCookieValue(cookieMesaage, "cookieUserPassword") alert("密码为:"+cookieValue); } } //该函数用于返回某个Cookie的值 //cookieValue为整个Cookie文件的内容 //cookieName为要获得值的Cookie名 function returnCookieValue(cookieValue,cookieName) { var returnCookieValue = ""; //使用“; ”作为分隔符将整个Cookie内容分隔成数组,此时数组中 //的每个元素都是由一个Cookie名、等于号和Cookie值组成的字符串 var cookies = cookieValue.split("; "); //定义一个数组,用于存放Cookie名和Cookie值 var cookiesValue = new Array(); //通过循环将Cookie名和Cookie值放在数组中 for (var i=0;i<cookies.length;i++) { //将数组cookies中的每一个元素都分割成数组,此时数组的第 //一个元素为Cookie名,第二个元素为Cookie值 var tempArr = cookies[i].split("="); //将数组作为元素放在cookiesValue数组中 cookiesValue[i] = tempArr; } //通过循环查找Cookie名和Cookie值 for (var i=0;i<cookiesValue.length;i++) { //如果数组中的第一个元素值与Cookie名相同,那么数组中的第 //二个元素值为Cookie值 if (cookiesValue[i][0]==cookieName) { returnCookieValue = cookiesValue[i][1]; break; } } return returnCookieValue; } --> </script> </head> <body> <form name="myForm"> 姓名:<input type="text" name="myName"><br> 密码:<input type="password" name="myPassword"><br> <input type="button" value="设置Cookie" onclick="setCookie()" ><br> <input type="button" value="读取Cookie中的姓名" onclick= "getCookie('myName')"> <input type="button" value="读取Cookie中的密码" onclick= "getCookie('myPassword')"> </form> </body> </html>
上述代码为光盘目录里“代码\第17章\sample04.htm”的内容。本例修改了代码清单17-3中的代码,使用数组的方式来精确读取Cookie的值,其运行结果与sample03.htm的运行结果相同,读者也可以自己运行该文件查看效果。