用Cookie在客户端保存.ppt

第7章 用Cookie在客户端保存信息,前面的章节从各个方面讲述了JavaScript的基础知识。从本章开始，将进入JavaScript针对web页面控制的部分。在制作网页的时候，常常需要使用表单和用户交互。而有时表单项目很多，用户填写了很久的时间，却因为意外（超时、误操作.）等原因离开了该页面，再次回到表单页面时不得不重填所有的项目，这会给用户非常难以忍受的体验。那么一个理想的解决方案就是将用户的表达内容保存在本地，当页面载入时重载这些数据即可。,7.1 示例：用Cookie实现可以记住内容的表单,代码就是一个可以记住用户输入内容的表单。 代码说明：,7.2 什么是Cookie,“Cookie”来自于英文，原意是“小甜饼”。维基百科上的定义是：“Cookie，有时也用其复数形式Cookies，指某些网站为了辨别用户身份而储存在用户本地终端上的数据”。简单来说，Cookie就是服务器暂存放在浏览者电脑里的资料，好让服务器用来辨认其计算机。在浏览网站的时候，Web服务器会先送一小小资料放在访问者的计算机上，这段资料就是Cookie。当下次用户再访问同一个网站，Web服务器会先看看有没有其上次留下的Cookie资料，有的话，就会依据Cookie里的内容来判断使用者，送出特定的网页内容。 Cookie看上去很复杂，那么其存在的价值是什么？为什么Web服务器不可以直接识别用户的电脑？要理解这些，必须先理解HTTP协议。,7.2.1 HTTP协议简介,用户在浏览网页的时候，浏览器的地址栏里输入的网站地址叫做统一资源定位符（URLUniform Resource Locator）。就像每家每户都有一个门牌地址一样，每个网页也都有一个Internet地址，这个地址就是URL。浏览器通过超文本传输协议（HTTP），将Web服务器上站点的网页代码提取出来，并翻译成漂亮的网页。因此在认识HTTP协议之前，有必要先弄清楚URL的组成,例如“/cd/corporate/home/apac/zho/324811.htm”。其含义如下： （1）http:/：代表超文本传输协议，通知服务器显示Web页，通常不用输入 （2）www：代表一个Web(万维网)服务器 （3）/：这是装有网页的服务器的域名，或站点服务器的名称 （4）cd/corporate/home/apac/zho/：为该服务器上的路径，就好像一般个人电脑系统中的文件夹 （5）324811.htm：324811.htm是文件夹中的一个文件（HTML网页）,7.2.2 Cookie存在的意义,正是由于HTTP协议有着非连接和无状态的特性，使得服务器并不能够区分出每次访问者之间的不同。比如用户A和用户B先后请求一个页面，服务器并不能判断出这两次请求是来自于不同的用户，还是来自于同一个用户。那么在实际的网络分布式应用中，客户身份的确认就成为一个很大的困扰。为了解决这个问题，人们在HTTP协议的基础上扩展出Cookie这个有力的工具。 Cookie是一小段文本信息，被保存在客户端。每次浏览器访问服务器的时候，会自动的提交这段信息给服务器，服务器上的可执行程序（ASP、PHP或者其他的程序）会获得这段信息，并且根据该信息进行相应的处理。,7.2.3 Cookie的优点和限制,Cookie协助HTTP协议，使得客户端和服务器之间的通信有了“状态”，给用户和网站带来了很多的好处。举例来说，Cookie可以实现很多非常实用的应用： （1）Cookie能使站点跟踪特定访问者的访问次数、最后访问时间和访问者进入站点的路径。 （2）Cookie能告诉在线广告商广告被点击的次数 ，从而可以更精确的投放广告。 （3）Cookie有效期限未到时，Cookie能使用户在不键入密码和用户名的情况下进入曾经浏览过的一些站点。 （4）Cookie能帮助站点统计用户个人资料以实现各种各样的个性化服务。,7.3 把输入框的内容保存在客户端使用Cookie,虽然大多数情况下，Cookie都是由服务器端的应用程序（如ASP、PHP和Perl等）操作和处理的。但JavaScript也提供了对Cookie的操作控制机制。,7.3.1 Cookie的保存和读取,在JavaScript的文档对象模型（DOM）中，Cookie对象是从属于文档对象（window.document）的子对象。其表现行为类似于一个字符串对象。如前面所说，Cookie保存的是文本信息，因此JavaScript中常将字符串或数值型变量的内容保存于其中。 将信息保存在Cookie中的语法很简单，即直接将字符串赋值给该对象： window.document.cookie = “需要保存的信息” window.document.cookie = ”关键字=值” 获取Cookie对象中保存的信息也很简单，可以直接将该对象作为字符串处理。例如： alert(document.cookie);,7.3.2 字符串的编码,在字符串的实际使用中，常常会遇到对其编码的限制。比如Cookie中不允许需要保存的字符串中有分号“;”出现。有些操作系统，在解释中文的字符串时常常出现乱码的现象。这些都需要程序员想办法避免储存数据中出现非英文字母、非数字的字符。 JavaScript提供了内置的编码和解码函数，用来将非英文的字符编码或解码。编码函数为“escape”，使用的语法为： codedString = escape(originalString); 其作用为，将参数字符串“originalString”中的特殊字符（绝大多数的非英文字母、非数字的字符）替换为“%”加上该字符unicode编码的两位十六进制字符，或“%u”加上该字符unicode编码的四位十六进制字符（视该字符的编码而定）。 函数“unescape”与“escape”相反，用于将“escape”编码后的字符串解码还原为原始的字符串。其语法为： originalString = unescape(codedString);,7.4 Cookie的有效期、域和路径,Cookie作为网站保存在客户端电脑上的小段文本信息，不可能永远的存在下去，其有着一定的生存周期。当过期后，浏览器会自动的删除该Cookie。Cookie还有着域和路径的属性，用来标识不同的Cookie。浏览器在访问网页的时候，会自动根据网页的URL决定所需发送的Cookie。这些Cookie的属性不可以直接访问，只能在设置某一Cookie的时候设置。,7.4.1 Cookie的有效期和清除,Cookie的有效期在不设置的情况下，当用户关闭浏览器时即被删除。设置有效期后，浏览器会自动识别Cookie的状态是否过期。JavaScript中，设置Cookie的有效期很简单，只需要在设置Cookie的时候，在需保存的值后用分号“;”隔开，加上形如“expires=过期日期字符串”的字段就可以了。这也是为什么在Cookie所保存的信息字符中不可以有分号“;”的原因：系统需要保留该字符来分隔信息主体和附加的有效期等内容。“过期日期字符串”可以为多种形式，都可以被浏览器自动的理解。例如下面的语法都是可以的： document.cookie = “姓名=妞妞; expires = Mon, 31 Dec 2007 17:41:11 UTC”; document.cookie = “姓名=成头; expires = 2008年1月1日 1:42:12”; document.cookie = “姓名=青青; expires = 2008/1/1 1:42:12”;,7.4.2 用Cookie实现记事贴,利用Cookie的有效期可以实现很多有趣的创意。代码7-3.htm是一个简单的记事贴效果。 修改程序中多行文本框的内容，修改后的内容会被自动保存下来，并在下次打开的时候自动载入。其效果类似于代码7-1.htm的自动保存。区别在于使用了Cookie的有效期属性后，即使页面关闭，Cookie的内容也会一直存在。 代码7-3.htm中，使用了Date对象，通过“dt.setYear(dt.getYear()+2);”、“dt.toUTCString()”语句，使该Cookie的过期日期为当前时间的两年之后。,7.4.3 Cookie的域和路径及Cookie欺骗,Cookie有着域的属性，浏览器和服务器通信时，仅将所访问主机对应的域的Cookie发送给该主机。服务器在通知浏览器设置Cookie的时候，浏览器自动的将该Cookie保存在该服务器的域名下，从而避免出现Cookie泄漏、将某一网站的Cookie发送给另一个网站的错误。譬如，当用户打开“”和“”的时候，“document.cookie”具有着不同的内容，如图所示。,7.5 小结,由于网页的访问基于HTTP协议，而该协议有着非连接和无状态的特点，因此鉴别区分不同的访问