您的位置：首页 > 理论基础

cookie 是存储于访问者的计算机中的变量

2014-10-09 09:42 113 查看
今天把javascript如何用来创建及存储cookie复习了一下，其中的一点体会拿出来和大家讨论，首先看一下基础知识：

什么是cookie

cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。

有关cookie的例子

名字 cookie： 当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 "Welcome John Doe!" 的欢迎词。而名字则是从 cookie 中取回的。

密码 cookie： 当访问者首次访问页面时，他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时，密码就会从 cookie 中取回。

日期 cookie： 当访问者首次访问你的网站时，当前的日期可存储于 cookie 中。当他们再次访问网站时，他们会收到类似这样的一条消息："Your last visit was on Tuesday August 11,2005!"。日期也是从 cookie 中取回的。

下面来创建一个cookie的实例，如何来创建cookie及取出cookie。

javascript部分代码：

view source

print?

01
//创建cookie
02
function
setCookie(name,value,expireday) {
03
var
 
exp =
new
 
Date();
04
exp.setTime(exp.getTime() + expireday*24*60*60*1000);
//设置cookie的期限
05
document.cookie = name+
"="
+escape(value)+
";expires"
+
"="
+exp.toGMTString();
//创建cookie
06
}
07
//提取cookie中的值
08
function
 
getCookie(name) {
09
var
 
cookieStr = document.cookie;
10
if
(cookieStr.length >0) {
11
var
 
cookieArr = cookieStr.split(
";"
);
//将cookie信息转换成数组
12
for
 
(
var
 
i=0;i<cookieArr.length;i++) {
13
var
 
cookieVal = cookieArr[i].split(
"="
);
//将每一组cookie(cookie名和值)也转换成数组
14
if
(cookieVal[0] == name) {
15
return
 
unescape(cookieVal[1]);
//返回需要提取的cookie值
16
}
17
}
18
}
19
}
20
//测试cookie
21
function
 
checkCookie() {
22
var
 
cookieUser = document.getElementById(
"cookieUser"
);
23
var
 
userName = getCookie(
"userName"
);
24
if
(userName) {
25
cookieUser.innerHTML =
"您好"
+userName+
"，欢迎再次回来！"
;
26
}
else
 
{
27
var
 
value = prompt(
"请输入用户名"
,
""
);
28
if
(value) {
29
setCookie(
'userName'
,value,1);
30
}
else
 
{
31
alert(
"请输入用户名！"
);
32
}
33
}
34
}
主要在于如何提取我们需要的cookie信息，在本例的getCookie函数中主要是将cookie信息转化成数组的方式来查找我们需要提取的cookie值。还可以通过正则表达式的方式来匹配，如下：

view source

print?

1
function
 
getCookie(name) {
2
var
 
cookieStr = document.cookie;
3
var
 
cookieArr = cookieStr.match(
new
 
RegExp(name+
"=[a-zA-Z0-9]*;$"
));
4
var
 
cookieVal = cookieArr.split(
"="
);
5
if
(cookieVal[0] == name) {
6
return
 
unescape(cookieVal[1]);
7
}
8
}
比如在这个例子中，如果打开浏览器中没有存储名为userName的cookie，则会提示用户输入用户名，再次刷新页面时则会显示输入的cookie值。 最后我们可以测试一下代码：

view source

print?

1
<
body
 
onload
=
"checkCookie()"
>
2
<
p
 
id
=
"cookieUser"
></
p
>
3
</
body
>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航