提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

javascript学习笔记（七）利用javascript来创建和存储cookie

JavaScript存储笔记学习Cookie 利用 创建
2023-06-13 09:14:27 时间
首先看一下基础知识：
1、什么是cookie
cookie是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个cookie。你可以使用JavaScript来创建和取回cookie的值
2、有关cookie的例子：
•名字cookie当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于cookie中。当访问者再次访问网站时，他们会收到类似"WelcomeJohnDoe!"的欢迎词。而名字则是从cookie中取回的。
•密码cookie当访问者首次访问页面时，他或她也许会填写他/她们的密码。密码也可被存储于cookie中。当他们再次访问网站时，密码就会从cookie中取回。
•日期cookie当访问者首次访问你的网站时，当前的日期可存储于cookie中。当他们再次访问网站时，他们会收到类似这样的一条消息："YourlastvisitwasonTuesdayAugust11,2005!"。日期也是从cookie中取回的。
下面来创建一个cookie的实例，如何来创建cookie及取出cookie
javascript部分代码：
复制代码代码如下:

//创建cookie
functionsetCookie(name,value,expireday){
varexp=newDate();
exp.setTime(exp.getTime()+expireday*24*60*60*1000);//设置cookie的期限
document.cookie=name+"="+escape(value)+";expires"+"="+exp.toGMTString();//创建cookie
}
//提取cookie中的值
functiongetCookie(name){
varcookieStr=document.cookie;
if(cookieStr.length>0){
varcookieArr=cookieStr.split(";");//将cookie信息转换成数组
for(vari=0;i<cookieArr.length;i++){
varcookieVal=cookieArr[i].split("=");//将每一组cookie(cookie名和值)也转换成数组
if(cookieVal[0]==name){
returnunescape(cookieVal[1]);//返回需要提取的cookie值
}
}
}
}
//测试cookie
functioncheckCookie(){
varcookieUser=document.getElementById("cookieUser");
varuserName=getCookie("userName");
if(userName){
cookieUser.innerHTML="您好"+userName+"，欢迎再次回来！";
}else{
varvalue=prompt("请输入用户名","");
if(value){
setCookie("userName",value,1);
}else{
alert("请输入用户名！");
}
}
}

主要在于如何提取我们需要的cookie信息，在本例的getCookie函数中主要是将cookie信息转化成数组的方式来查找我们需要提取的cookie值。还可以通过正则表达式的方式来匹配，如下：
复制代码代码如下:

functiongetCookie(name){
varcookieStr=document.cookie;
varcookieArr=cookieStr.match(newRegExp(name+"=[a-zA-Z0-9]*;$"));
varcookieVal=cookieArr.split("=");
if(cookieVal[0]==name){
returnunescape(cookieVal[1]);
}
}

比如在这个例子中，如果打开浏览器中没有存储名为userName的cookie，则会提示用户输入用户名，再次刷新页面时则会显示输入的cookie值。
最后我们可以测试一下代码：
复制代码代码如下:
<bodyonload="checkCookie()">
<pid="cookieUser"></p>
</body>

相关文章