1.6.8　JavaScript中的cookie

cookie是指当用户访问某一个Web站点时，由服务器端存储在客户端计算机中的一些变量。它通常用来区别不同的访问用户。当同一台计算机请求访问某个页面时，浏览器也会将cookie发送给服务器。

cookie的一般形式：cookie名称=cookie值。cookie的名字一般使用字母和数字命名，cookie的值要求是可以用URL编码的字符。所有的cookie都有一个失效期，过了失效期，计算机就会将这个cookie删除。JavaScript中通常使用document的cookie属性存储cookie。它的用法如下所示。

---

document.cookie='cookieName='+escape（'cookieValue'）+'；expires='+expirationDateObj.toGMTString（）；

---

其实上面的代码就是为cookie属性赋值，所赋的值是一个字符串，该字符串包含了cookie的名字和值，以及cookie的过期时间。下面通过一个具体的实例，来了解JavaScript中cookie的使用。

（1）创建一个存储cookie的函数，该函数功能是保存cookie的值和过期时间。代码如下所示。

---

01 function setCookie（name,value）//该函数有两个参数，一个是cookie的名字，一个是cookie的值

02 {

03 var days=30；//cookie的有效期为30天

04 var exdate=new Date（）；

05 exdate.setDate（exdate.getDate（）+days）；

06 document.cookie=name+"="+escape（value）+"；expires="+exdate.toGMTString（）；

//设置cookie

07 }

---

【代码解析】在上面的代码中，首先取得有效日期，然后加上cookie有效期的天数。之后，在document的cookie属性中存储cookie的名字、值和过期日期。

（2）创建一个函数，通过该函数获取被设置的cookie值。代码如下所示。

---

01 function getCookie（name）

02 {

03 //判断cookie属性的长度是否大于0，大于0说明设置了cookie

04 if（document.cookie.length＞0）

05 {

06 start=document.cookie.indexOf（name+"="）；//找到设置cookie名称的位置

07 if（start！=-1）

08 {

09 start=start+name.length+1；

10 end=document.cookie.indexOf（"；"，start）；

11 if（end==-1）

12 end=document.cookie.length；//获取cookie的长度

13 return unescape（document.cookie.substring（start,end））；

//对通过escape（）编码的字符串解码

14 }

15 }

16 return""；

17 }

---

【代码解析】该函数首先通过cookie的length属性判断cookie是否有值，如果有值，则找到该cookie的值，然后返回该值。否则，返回空字符串。

（3）创建一个函数，如果cookie被设置了，那么该函数弹出一个提示对话框，否则弹出一个输入框，让用户输入名称。该函数代码如下：

---

01 function checkCookie（）

02 {

03 user_name=getCookie（'user_name'）；//调用getCookie函数

04 if（user_name！=null＆＆user_name！=""）

05 {

06 alert（'欢迎您，'+user_name+'！'）；

07 }

08 else

09 {

10 user_name=prompt（'请输入您的名字：'，""）；//弹出输入窗口，并将返回值，赋给user_name变量

11 if（user_name！=null＆＆user_name！=""）

12 {

13 setCookie（'user_name'，user_name）；

14 }

15 }

16 }

---

【代码解析】该函数首先通过函数getCookie取cookie的值，如果取到cookie的值，则弹出一个对话框，显示一段文字信息。否则，使用方法prompt弹出“输入提示对话框”，等待用户输入名字，然后将这个名字作为cookie的值，通过setCookie函数进行保存。

（4）以上示例的完整代码如代码1-33所示。

代码1-33　JavaScript中cookie的使用1-33.html

---

01 ＜html＞

02 ＜head＞

03 ＜title＞1-33＜/title＞

04 ＜script language="JavaScript"＞

05 function setCookie（name,value）//该函数有两个参数，一个是cookie的名字；一个是cookie的值

06 {

07 var days=30；//cookie的有效期为30天

08 var exdate=new Date（）；

09 exdate.setDate（exdate.getDate（）+days）；//设置过期时间

10 document.cookie=name+"="+escape（value）+"；expires="+exdate.toGMTString（）；

11 alert（document.cookie）；//显示cookie

12 }

13

14 function getCookie（name）

15 {

16 //判断cookie属性的长度是否大于0，大于0说明设置了cookie

17 if（document.cookie.length＞0）

18 {

19 start=document.cookie.indexOf（name+"="）；//找到设置cookie名称的位置

20 if（start！=-1）

21 {

22 start=start+name.length+1；

23 end=document.cookie.indexOf（"；"，start）；

24 if（end==-1）

25 end=document.cookie.length；

26 return unescape（document.cookie.substring（start,end））；

27 }

28 }

29 return""；

30 }

31

32 function checkCookie（）

33 {

34 user_name=getCookie（'user_name'）；

35 if（user_name！=null＆＆user_name！=""）//判断用户名是否没有设置或为空

36 {

37 alert（'欢迎您，'+user_name+'！'）；

38 }

39 else

40 {

41 user_name=prompt（'请输入您的名字：'，""）；//弹出输入窗口，并将返回值，赋给user_name变量

42 if（user_name！=null＆＆user_name！=""）

43 {

44 setCookie（'user_name'，user_name）；//设置cookie

45 }

46 }

47 }

48

49 ＜/script＞

50 ＜/head＞

51

52 ＜body onLoad="checkCookie（）"＞

53 ＜/body＞

54 ＜/html＞

---

【代码解析】第5～12行定义setCookie（）函数，用来设置cookie。第14～30行定义getCookie（）函数，用来通过关键字获取cookie。第32～47行定义checkCookie（）函数，使用提示框显示或判断cookie。

（5）当第一次用浏览器打开该文档时，将看到如图1-35所示的效果。因为此时没有设置过cookie，所以弹出对话框请用户输入名字。

（6）在此对话框中输入名字，单击“确定”按钮，如图1-36所示。注意，之后再刷新该页面，可以看到如图1-37所示的执行效果。因为此时已经设置过cookie，所以会弹出信息对话框。而对话框中有用户刚刚输入的名字，这个名字是从cookie中取得的。