《HTML教程》-8.7教学材料

也就是说同一用户两次访问同一网址，服务器是不“认识”他的，但通过Cookie可以把用户和访问的网址记录下来，下次访问该网址时，服务器可以通过Cookie“记住”这一用户。Cookie保存用户信息是以“名-值”对的格式保存的，格式如下：username=cjhJavaScript通过document.cookie（也就是Cookie对象），来创建、读取和删除Cookie。8.7.1创建Cookie可以通过以下方式创建Cookie。document.cookie="username=cjh";document.cookie="username=cjh;expires=Thu,31Aug201706:28:09GMT";document.cookie="username=cjh;expires=Thu,31Aug201706:28:09GMT;path=/";

◆第1种方式直接创建了一个“名-值”对的Cookie。

◆第2种方式除了“名-值”对外，还用expires指定了Cookie的终止时间，即删除Cookie的时间。默认情况下，Cookie在页面关闭时终止，即Cookie的有效期为页面打开的时间，页面关闭Cookie即消失。

◆第3种方式还指定了path，规定了Cookie的归属，默认情况下Cookie属于当前页面。注意，在cookie的名或值中不能使用分号（;）、逗号（,）、等号（=）以及空格。Cookie在存入document.cookie之前需要使用escape()进行编码处理，取出时用unescape()处理，得到原来的字符串。8.7.2读取Cookie

通过document.cookie读取所有的Cookie。读取方法如下：varcookies=document.cookie;这样，可以读取所有的Cookie，以“；”分隔，如cookie1=value1;cookie2=value2;cookie3=value2;……。如果需要某一个Cookie，需要通过字符串操作方法进行提取或分离。8.7.3修改Cookie

修改Cookie也十分简单，只需要对已经存在的Cookie进行重新赋值，就可修改原来的Cookie。也就说修改Cookie与创建Cookie的方法是一样的，差别就是创建时没有同名的Cookie存在，而修改时有同名的Cookie。修改Cookie的格式如下：document.cookie="username=xc";通过以上语句，原来名为username的Cookie的内容即被更改为xc。8.7.4删除Cookie

删除Cookie与其他的删除不同，不是通过调用某个方法，而是指定Cookie的终止时间，到了终止时间Cookie将自动被删除，而无须程序员的干预。格式如下：document.cookie="username=;expires=Thu,31Aug201706:28:09GMT";现在通过expires指定了名为username的Cookie在Thu,31Aug201706:28:09GMT之后将自动消除。需要注意的是，删除Cookie没有必要提供Cookie的值，只有它的名字就可以了。这也正说明了Cookie是以“名字”进行区分的。8.7.5Cookie操作实例下面通过一个实际的例子来说Cookie的操作。在这个例子中，允许用户创建Cookie，修改Cookie，读取/获取Cookie和删除Cookie。其删除Cookie是通过指定过期时间实现的，没有对应的用户操作。实际应用中，Cookie是由服务器端的脚本（如JSP、ASP和PHP等）保存在客户端的，JavaScript可以读取和操作这些Cookie。这个例子是在客户端创建并保存/修改Cookie。主要包括3个功能：创建/修改Cookie、获取Cookie和检查Cookie，下面分别予以实现。（1）创建/修改Cookie在这个例子中，通过用户输入Cookie的名和值，以空格分隔，然后按照Cookie的格式（即名-值对）存入Cookie对象，并指定Cookie的过期时间。要实现这一功能，需要分两步实现。第一步实现Cookie的创建/修改；第二步响应用户操作，获取用户输入，并对输入的数据进行分隔处理，将分离出的数据调用第一步实现的方法保存在Cookie中。先来实现Cookie的创建/修改。创建/修改Cookie需要知道名和值，还有终止时间（或过期时间），对于名和值直接由用户输入即可，现在看一下过期时间的设定。终止时间是以创建Cookie的时间为起始，再加上用户指定的时间长度即为Cookie的过期时间。时间是以创建Cookie的时间为起始，再加上用户指定的时间长度即为Cookie的过期时间。Cookie创建的时候可以通过创建Date对象获得；然后通过Date对象的getTime()方法获得当前时间的毫秒数（自1970年1月1日0时0分0秒开始的毫秒数）；再加上用户指定时间换算成的毫秒数（这里我们规定指定终止时间以秒为单位），即为Cookie的终止时间；然后再通过setTime()方法把计算的终止时间转换成Date对象（对当前Date对象的时间进行了修改）；最后通过Date对象的toUTCString()方法，把Date对象转换成字符串表示，作为Cookie的expires的值。总结总结起来有以下几步：

◆创建Date对象：vardate=newDate()；

◆获得Date对象的毫秒数表示date.getTime()；

◆计算终止时间：expTime=date.getTime()+expTime*1000，其中expTime为用户指定的Cookie存续时间长度，以秒为单位。

◆将毫秒数转换成Date对象：date.setTime(expTime);

◆将Date对象转换成字符串表示：date.toUTCString()。有了终止时间剩下的就是按Cookie的格式组装字符串，并赋给document.cookie就可以了，代码如下：varstr=name+"="+value+";expires="+date.toUTCString();document.cookie=escape(str);最后要注意的就是要用escape()方法对组装好的名-值对进行格式化，把其中的空格等字符进行转换，以符合Cookie的存储要求。完整的代码如下：//设置/修改Cookie，终止时间以秒为单位 functionsetCookie(name,value,expTime){vardate=newDate();//获取当前时间 //当前时间加上用户设置的终止时间 expTime=date.getTime()+expTime*1000; date.setTime(expTime); varstr=name+"="+value+";expires="+date.toUTCString(); document.cookie=escape(str); }（2）获取Cookie由于document.cookie返回的是浏览器中所有的Cookie，所以要想找到想要的Cookie，就需要从这个所以Cookie中进行查找。这些查找就是String方法的综合运用。这里给出的只是一种处理方法，大家可以根据学过的String知识自己给出其他的方法。我们采取的方法分如下几步：

◆获取所有的Cookie：varcookies=unescape(document.cookie)，这里需要说明的是由于在保存Cookie时使用escape()进行编码操作，所以这里要进行解码操作，以还原原来的字符串。

◆找到Cookie名字在字符串cookies中的起始位置：varcbegin=cookies.indexOf(name);

◆如果指定的Cookie名称存在，则读取名称的值：cookies.substring(cbegin,cookies.indexOf(";",cbegin))。这条语句的意思是，从名称出现的起始位置开始，截取到下一个（即从Cookie名字出现的位置cbegin开始计算）“;”为止的子串（注意，不包括这个分号）。这个子串就是我们要的Cookie。否则，返回空串。获取Cookie的完整代码//获取Cookie functiongetCookie(name){ //获取所有的Cookie varcookies=unescape(document.cookie); //获得Cookie名字在字符中的起始位置 varcbegin=cookies.indexOf(name); //如果指定名字的Cookie存在 if(cbegin!=-1){ returncookies.substring(cbegin,cookies.indexOf(";",cbegin)); } //若指定的名字不存在，则返回空串 return'';

}（3）检查指定的Cookie

检查Cookie比较简单，就分为两步：首先，取得所有的Cookie；第二，判断Cookie中是否存在指定的名称，这里仍旧用indexOf()来实现。如果indexOf()返回-1则指定的Cookie不存在，返回false；否则指定的Cookie存在，返回true。完整的代码如下：//检查Cookie是否存在 functioncheckCookie(name){ //获得所有Cookie varcookies=unescape(document.cookie); //检查指定名称的Cookie是否存在 varflag=cookies.indexOf(name)!=-1?true:false; returnflag;}这个Cookie操作的例子，除了上述3个方法之外，还有3个方法用于响应用户的操作（按钮的单击操作），并接收用户的输入。这些内容大家已经学习过，在此就不再列出实现代码，完整的代码见随书源码的Listing8-11.html。测试方法要测试这个例子，也必须通过http协议进行访问，否则得不到应有的效果。必须将Listi