第7章用Cookie在客户端保存

1、第,07,章,JS,从入门到精通,用,Cookie,在客户端保存信息,第,7,章,用,Cookie,在客户端保存信息,前面的章节从各个方面讲述了,JavaScript,的基础知识。从本章开始,将进入,JavaScript,针对,web,页面控制的部分。在制作网页的时候，常常,需要使用表单和用户交互。而有时表单项目很多，用户填写了很久的时,间，却因为意外（超时、误操作,等原因离开了该页面，再次回到表,单页面时不得不重填所有的项目，这会给用户非常难以忍受的体验。那,么一个理想的解决方案就是将用户的表达内容保存在本地，当页面载入,时重载这些数据即可,本章将介绍,URL,的构成,HTTP,协议的基本特

2、点,Cookie,对象的读取和写入,字符串对象的编码和解码,Cookie,对象的有效期、域和路径属性,7.1,示例：用,内容的表单,Cookie,实现可以记住,代码,7-1.htm,就是一个可以记住用户输入内容的表单,7.2,什么是,Cookie,Cookie,来自于英文，原意是“小甜饼”。维基百科上,的定义是,Cookie,有时也用其复数形式,Cookies,指某些网,站为了辨别用户身份而储存在用户本地终端上的数据”。简单来,说,Cookie,就是服务器暂存放在浏览者电脑里的资料，好让服务,器用来辨认其计算机。在浏览网站的时候,Web,服务器会先送一,小小资料放在访问者的计算机上，这段资料就

3、是,Cookie,当下次,用户再访问同一个网站,Web,服务器会先看看有没有其上次留下,的,Cookie,资料，有的话，就会依据,Cookie,里的内容来判断使用者,送出特定的网页内容,7.2.1 HTTP,协议简介,站地址叫做统一资源定位符,用户在浏览网页的时候，浏览器的地址栏里输入的网,Locator,URL,Uniform Resource,都有一个,。就像每家每户都有一个门牌地址一样，每个网页也,本传输协议,Internet,来，并翻译成漂亮的网页,HTTP,地址，这个地址就是,，将,Web,URL,浏览器通过超文,服务器上站点的网页代码提取出,http:/,7.2.2 Cookie,

4、存在的意义,正是由于,HTTP,协议有着非连接和无状态的特性，使得,服务器并不能够区分出每次访问者之间的不同。比如用户,A,和用,户,B,先后请求一个页面，服务器并不能判断出这两次请求是来自,于不同的用户，还是来自于同一个用户。那么在实际的网络分布,式应用中，客户身份的确认就成为一个很大的困扰。为了解决这,个问题，人们在,HTTP,协议的基础上扩展出,Cookie,这个有力的工,具,Cookie,是一小段文本信息，被保存在客户端。每次浏,览器访问服务器的时候，会自动的提交这段信息给服务器，服务,器上的可执行程序,ASP,PHP,或者其他的程序）会获得这段信,息，并且根据该信息进行相应的处理,h

5、ttp:/,7.2.3 Cookie,的优点和限制,Cookie,通信有了“状态”，给用户和网站带来了很多的好处。举例,协助,HTTP,协议，使得客户端和服务器之间的,来说,Cookie,可以实现很多非常实用的应用,同样的,Cookie,的限制也有很多,1,大小受到限制,2,用户配置为禁用,3,潜在的安全风险,7.3,把输入框的内容保存在客户端,使用,Cookie,序（如,供了对,ASP,虽然大多数情况下,Cookie,PHP,Cookie,都是由服务器端的应用程,的操作控制机制,和,Perl,等）操作和处理的。但,JavaScript,也提,7.3.1 Cookie,的保存和读取,Cooki

6、e,在,JavaScript,的文档对象模型,DOM,中,对象。其表现行为类似于一个字符串对象。如前面所说,对象是从属于文档对象,window.document,的子,Cookie,数值型变量的内容保存于其中,保存的是文本信息，因此,JavaScript,中常将字符串或,分号分隔，作为一个字符串整体返回，因此常需要对其进行,在访问,Cookie,内容时，系统会将所有保存的数据以,字符串操作，以提取特定项目的数据,7.3.2,字符串的编码,制。比如,现。有些操作系统，在解释中文的字符串时常常出现乱码的,Cookie,在字符串的实际使用中，常常会遇到对其编码的限,中不允许需要保存的字符串中有分号,

7、出,现象。这些都需要程序员想办法避免储存数据中出现非英文,字母、非数字的字符,JavaScript,非英文的字符编码或解码,提供了内置的编码和解码函数，用来将,codedString = escape(originalString,originalString = unescape(codedString,7.4 Cookie,的有效期、域和路径,Cookie,作为网站保存在客户端电脑上的小段文本信息,不可能永远的存在下去，其有着一定的生存周期。当过期后，浏览,器会自动的删除该,Cookie,Cookie,还有着域和路径的属性，用来,标识不同的,Cookie,浏览器在访问网页的时候，会自动根据

8、网页,的,URL,决定所需发送的,Cookie,这些,Cookie,的属性不可以直接访,问，只能在设置某一,Cookie,的时候设置,7.4.1 Cookie,的有效期和清除,Cookie,的有效期在不设置的情况下，当用户关闭浏览,器时即被删除。设置有效期后，浏览器会自动识别,Cookie,的状,态是否过期,JavaScript,中，设置,Cookie,的有效期很简单，只,需要在设置,Cookie,的时候，在需保存的值后用分号,隔开，加,上形如,expires,过期日期字符串”的字段就可以了,如果把,Cookie,的有效期设置在当前的系统时间之前,则该,Cookie,会被浏览器自动的删除掉。这

9、一特性常被用来清除,不需要的,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.4.3 Cookie,的域和路径及,Cookie,欺骗,Cookie

10、,有着域的属性，浏览器和服务器通信时，仅将,所访问主机对应的域的,Cookie,发送给该主机。服务器在通知浏,览器设置,Cookie,的时候，浏览器自动的将该,Cookie,保存在该,服务器的域名下，从而避免出现,Cookie,泄漏、将某一网站的,Cookie,发送给另一个网站的错误。譬如，当用户打开,http:/,和,http:/,的时,候，,document.cookie,具有着不同的内容,document.cookie =,姓名,妞妞,domain=,document.cookie =,姓名,成头,path=admin; expires=2008-1,1,document.cookie

11、=,姓名,青青,domain=; path=%user,expires=2009-1,1,7.5,小结,由于网页的访问基于,HTTP,协议，而该协议有着非连接,和无状态的特点，因此鉴别区分不同的访问者就成为,Web,应用,的一个难题。出于安全性的考虑,JavaScript,很难直接操作浏览,者本地的文件。因此如何在客户端保存一些信息供,JavaScript,程,序使用也常困扰着程序员,Cookie,提供了一个简单方便的解决,方案,7.6,常见面试题分析,7.6.1 Cookie,是什么,Cookie,术，这种技术能够让网站把少量的数据存储到客户端的硬盘,是一种对客户端硬盘的数据进行存取的技,同时也能够从客户端的硬盘读取存储的数据,7.6.2,为了保证使用,Cookie,传递特殊字符，通常采用什么方法,因为,Cookie,是通过,HTTP,来传递的，而,HTTP,不允许某,个非字母和数字的字符被传递，因此,Cookie,不能包含分号等特殊,字符，所以需要