今天小编就为大家分享一篇关于Javascript读写cookie的实例源码,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

今天把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部分代码:

//创建cookie
function setCookie(name, value, expireday) {
 var exp = new Date();
 exp.setTime(exp.getTime() + expireday*24*60*60*1000); //设置cookie的期限
 document.cookie = name+"="+escape(value)+"; expires"+"="+exp.toGMTString();//创建cookie
}
//提取cookie中的值
function getCookie(name) {
 var cookieStr = document.cookie;
 if(cookieStr.length > 0) {
 var cookieArr = cookieStr.split(";"); //将cookie信息转换成数组
 for (var i=0; i<cookieArr.length; i++) {
  var cookieVal = cookieArr[i].split("="); //将每一组cookie(cookie名和值)也转换成数组
  if(cookieVal[0] == name) {
  return unescape(cookieVal[1]); //返回需要提取的cookie值
  }
 }
 }
}
//测试cookie
function checkCookie() {
 var cookieUser = document.getElementById("cookieUser");
 var userName = getCookie("userName");
 if(userName) {
 cookieUser.innerHTML = "您好"+userName+",欢迎再次回来!"; 
 } else {
 var value = prompt("请输入用户名", "");
 if(value) {
  setCookie('userName', value, 1);
 } else {
  alert("请输入用户名!");
 }
 }
}

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

function getCookie(name) {
 var cookieStr = document.cookie;
 var cookieArr = cookieStr.match(new RegExp(name+"=[a-zA-Z0-9]*;$"));
 var cookieVal = cookieArr.split("=");
 if(cookieVal[0] == name) {
 return unescape(cookieVal[1]);
 }
}

比如在这个例子中,如果打开浏览器中没有存储名为userName的cookie,则会提示用户输入用户名,再次刷新页面时则会显示输入的cookie值。 最后我们可以测试一下代码:

<body>
<p id="cookieUser"></p>
</body>

用JavaScript可以将信息保存在Cookie中,在别的页面可以使用,这样也很方便实用,代码量也不多。不过需要注意的是有些浏览器不支持本地Cookie读写操作,需要在线才能读取,也就是把网站发布之后才允许。例如chrome浏览器。

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Cookie的读取例子</title>
   <link href="CSS/sheet.css" rel="external nofollow" rel="stylesheet" type="text/css">
<script language="javascript">
function writeCookie(){//写入cookie
 document.cookie=encodeURI("username="+document.form1.username.value);
 document.cookie=encodeURI("password="+document.form1.password1.value);
}
function readCookie(){//读取cookie
 var cookieString=decodeURI(document.cookie);//调用decodeURI函数获取Cookie
 if(cookieString.length!=0){//cookie不为空
  var cookies=cookieString.split(";");//使用字符串的split函数利用“;“分割字符串为数组,这样就把username和password分开了
  for(var i=0;i<cookies.length;i++){
   var cookieN=cookies[i].split("=");//使用字符串的split函数利用“=“分割字符串为数组,这样就把username和username的值分开了
   var cookieName=cookieN[0];//
   var cookieValue=cookieN[1];
   alert("Cookie名称为:"+cookieName+" ,值为:"+cookieValue);
 }
}else
alert("Cookie为空,请填写信息");
}
</script>
</head>
<body>
 <form action="" method="post" name="form1">
  <table >
   <tr align="right"><td>用户名:</td><td><input type="text" name="username" /></td></tr>
   <tr align="right"><td>密码:</td><td><input type="password" name="password1" /></td></tr>
   <tr align="right"><td>确认密码:</td><td><input type="password" name="password2" /></td></tr>
   <tr align="center">
    <td ><input type="button" value="写入Cookies" onClick="writeCookie();"></td>
    <td><input type="button" value="读取Cookies" onClick="readCookie();"></td></tr>
   </table>
  </form>
 </body>
</html>

在Chrome运行效果:

(填写好后点击写入再点击读取)

注:在IE、火狐等浏览器可以直接打开html读取Cookie操作,但在Chrome需要发布之后在线才行。即在浏览器输入ip打开。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对爱安网的支持。如果你想了解更多相关内容请查看下面相关链接

    无相关信息
最新资讯
超800家公司联合抵制Facebook 要求平台控制仇恨言论

超800家公司联合抵制F

据Politico消息,全球800家公司从社交网络中撤出了数百
联合国报告:2030年全球电子废弃物将达7400万吨

联合国报告:2030年全球

联合国报告:2019年全球产生了5360万吨电子废弃物,预测20
云旅游从直播种草 走向杂草丛生

云旅游从直播种草 走

云旅游怎么变成这味儿了?
北京百度网讯科技有限公司被法(tian)院(ping)列为被执行人

北京百度网讯科技有限

天眼查数据显示,7月2日,北京百度网讯科技有限公司被北京
那颗星星,突然消失了

那颗星星,突然消失了

一颗恒星突然消失了。这一奇怪的事件发生在一个距离我
特斯拉在中国启动电动皮卡Cybertruck预订 订金1000元

特斯拉在中国启动电动

特斯拉共提供三款CyberTruck,分别是单电机后轮驱动、双
最新文章
Vue实现图片与文字混输效果

Vue实现图片与文字混

用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

Vue实现点击当前元素

这篇文章主要介绍了Vue实现点击当前元素以外的地方隐
Vue实现验证码功能

Vue实现验证码功能

这篇文章主要为大家详细介绍了Vue实现验证码功能,文中
JS实现的雪花飘落特效示例

JS实现的雪花飘落特效

这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形
微信小程序实现图片压缩

微信小程序实现图片压

这篇文章主要为大家详细介绍了微信小程序实现图片压缩
JavaScript实现京东放大镜效果

JavaScript实现京东放

这篇文章主要为大家详细介绍了JavaScript实现京东放大