javascript Cookie

第17章CookieCookie是存储在客户端计算机中的一些信息，这些信息多用于与服务器进行交互。使用Document对象的cookie属性可以读取和设置Cookie的内容。17.1Cookie介绍在HTML和JavaScript出现初期，网页的内容比较单一，仅仅只是显示一些文字和图片。而随着网络技术的发展，客户端与服务器之间的联系变得越来越多，也越来越重要。在这些联系之中，经常需要建立一些信息，如用于识别用户的ID等，而这些信息通常都是以Cookie的形式存储在客户端计算机中的。17.1.1Cookie简介从JavaScript的角度来看，Cookie就是一些信息，如用户ID、用户状态等。这信息存放在客户端计算机中，用于客户端计算机和服务器之间传递信息。在JavaScript中，可以通过Document对象的cookie属性来读取或设置这些信息。由于Cookie多用在客户端计算机和服务器端计算机之间进行通信，因此，除了客户端程序（如JavaScript）之外，还有很多服务器端的程序（如ASP等）也可以存取Cookie。对于操作系统而言，Cookie就是一个文件，这个文件中记录着客户端计算机与服务器端计算机通信所需要的信息。为了安全方面的考虑，浏览器通常只会让Cookie的创建网站来访问该Cookie。例如，A网站所创建的Cookie只有A网站可以访问，而B网站所创建的Cookie也只有B网站可以访问，A、B网站不能访问对方所创建的Cookie。因此，用户不必担心信息泄露。17.1.2Cookie的使用范围实际上，Cookie的作用就是与服务器互动。由于网络的发达，客户端与服务器的互动变得十分重要，在以下几个场合中经常可以看到Cookie的身影。‰用户登录：在很多网站的登录页面中都可以看到一个Cookie选项，多用于询问用户在多长时间不需要再登录，如一天、一个月或一年等。这就需要使用Cookie技术，在用户第一次登录时，使用Cookie记录下了用户的信息，并让其保存一天、一个月或一年。只要Cookie没有过期，那么用户在下次访问需要身份验证时，就JavaScript开发技术大全·682·会通过Cookie将信息传递到服务器上，避免了用户的重复登录。‰电子商务：在电子商务中使用最多的就是购物车和最近浏览过的商品。这两项都使用了Cookie技术。当用户看到需要购买的商品时，浏览器可以将这些商品的信息写在Cookie中，此时的Cookie相当于购物车，只不过购物车中存放的不是商品，而是商品的信息。在用户最后结账时，可以将所有的商品信息从Cookie中取出，统一付款。最近浏览过的商品的处理方式相同，也是将用户最近浏览过的商品信息存放在Cookie中，当用户下次再访问该电子商务网站时，可以看到自己上次浏览过哪些商品。在电子商务中，使用Cookie还可以将购物做得更人性化。例如，通过Cookie记录用户浏览过的商品信息，再通过分析这些商品的共性来为用户推荐相关商品。‰博客：博客是目前网络中流行的网络日记。不同的用户都可以在博客中发表文章，也可以装饰自己的博客风格，如背景颜色、文字大小等。这些都可以先写在Cookie中，在用户确定之后，才一次性提交到服务器上。17.1.3Cookie的基本概念Cookie与前面章节中所介绍的变量、常量等不同，Cookie的信息是记录在一个Cookie文件中，并且这个Cookie文件是存放在客户端计算机中的，在使用Cookie时必须要注意以下几个基本概念。‰名称：每一个Cookie都有自己的名称，就好像每一个变量、常量都有自己的一个名称一样。通过Cookie名称可以存储Cookie信息。在JavaScript中，Cookie名称也必须是一个合法的标识符。如用户编号可以使用userId来命名。‰值：通过Cookie名称所存储的Cookie值，也就是存放在Cookie中的具体信息。例如用户的编号为10，那么userId的值为10。‰生存期：也就是Cookie的有效日期。在默认情况下，一个Cookie的生存期就是浏览器窗口关闭的时间。也就是说，在一个浏览器窗口中创建的Cookie，只要该浏览器没有关闭，那么该Cookie就会一直有效，一旦该浏览器窗口关闭，那么由该浏览器窗口所创建的Cookie就会失效，不能再访问。如果想要该Cookie在浏览器窗口关闭后还可以使用，就必须要为该Cookie设置生存期，也就是失效的日期。‰路径：出于安全方面的考虑，通常一个网页所创建的Cookie只能被与该网页在同一目录或子目录下的所有网页访问，而不能被其他目录下的网页访问。例如由“”所创建的Cookie，可以被“”下的所有网页访问，也可以被“”下的所有网页访问，但不能被“”下或“”下的任何网页访问。可以通过设置Cookie路径的方法让“”下或“”下的所有网页访问该Cookie。‰域：同样是出于安全方面的考虑，在默认情况下，即使设置了Cookie的路径，也只能在同一个域中访问Cookie，不同域之间的网页是不能互相访问Cookie的。如第17章Cookie·683·“”和“book.aspxfans.com”两个服务器之间的网页就不能互相访问Cookie。可以通过设置Cookie域的方法让“”和“book.aspxfans.com”两个服务器之间的网页互相访问Cookie。‰安全：在默认情况下，Cookie信息的传递使用的是没有加密的明码传递方式，如果Cookie中的信息比较重要，这就要求对Cookie信息进行加密。如果将Cookie的secure设为true，那么该Cookie就只能在HTTPS或其他安全协议中传输，可以增加安全性。17.1.4使用Cookie的注意事项Cookie的使用范围很广，但是在使用Cookie时，有以下几个方面必须要注意：‰一个网页可以创建多个Cookie，但多个Cookie可能会放在同一个cookie文件中。‰每个Cookie所存放的数据不能超过4KB。‰每个Cookie文件中存储的Cookie个数不能超过300个。‰每个域可以创建的Cookie文件不能超过20个。‰浏览器可以通过设置来接受或拒绝访问Cookie。‰虽然浏览器可以禁止网页访问非本网站（或域）所创建的Cookie，但是由于Cookie是以文件的形式存放在客户端计算机中的，因此，可以使用第三方工具来查看和修改Cookie文件中的内容。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信息。如以下代码所示：varcookies=document.cookieJavaScript开发技术大全·684·在以上代码中，cookies为变量名，document.cookie可以取得整个Cookie文件中的信息，因此，变量cookies有可能会包括多个Cookie的信息。17.2.2创建与读取Cookie使用Document对象的cookie属性可以创建和读取Cookie。其具体实现方法如代码清单17-1所示，请注意加粗的文字。代码清单17-1创建与读取Cookiehtmlheadtitle创建与读取Cookie/titlemetahttp-equiv=content-typecontent=text/html;charset=gb2312scriptlanguage=javascripttype=text/javascript!--//设置CookiefunctionsetCookie(){varuserName=myForm.myName.value;varuserPassword=myForm.myPassword.value;//添加或修改第一个Cookie，该Cookie名为cookieUserName，值//为“姓名”文本框中的内容document.cookie=cookieUserName=+userName;//添加或修改第二个Cookie，该Cookie名为cookieUserPassword，//值为密码框中的内容document.cookie=cookieUserPassword=+userPassword;}//读取CookiefunctiongetCookie(){//获得Cookie文件中的信息varcookieMesaage=document.cookie;alert(cookieMesaage);}--/script/headbodyformname=myForm姓名：inputtype=textname=myNamebr密码：inputtype=passwordname=myPasswordbrinputtype=buttonvalue=设置Cookieonclick=setCookie()inputtype=buttonvalue=读取Cookieonclick=getCookie()/form/body/html上述代码为光盘目录里“代码\第17章\sample01.htm”的内容，本例的关键知识点如第17章Cookie·685·下所示：（1）创建了一个文本框，一个密码框和两个按钮。（2）单击【设置Cookie】按钮时，调用setCookie()函数。在该函数中，先获取文本框和密码框中的文字，然后使用以下代码添加一个Cookie。document.cookie=cookieUserName=+userName;在以上代码中，Cookie名为“cookieUserName”，Cookie值为文本框中的内容。（3）然后使用以下代码创建另一个Cookie，该Cookie名为“cookieUserPassword”，值为密码框中的内容。document.cookie=cookieUserPassword=+userPassword;（4）单击【读取Cookie】按钮时，调用getCookie()函数。在该函数中，使用以下代码获取Cookie文件中的所有信息。varcookieMesaage=document.cookie;（5）然后使用alert()方法，将变量cookieMesaage的值输出，如图17-1所示。从图17-1中可以看出，Cookie文件中记录了两个Cookie的名称和值。图17-1sample01.htm的运行结果在默认情况下，只要打开sample01.htm文件的浏览器窗口还没有关闭时，Cookie就会一直存在，同一网站上的其他网页也可以读取该Cookie。代码清单17-2就是一段读取Cook