Javascript读写cookie的实例源码


Posted in Javascript onMarch 16, 2019

今天把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 onload="checkCookie()">
<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 onload="makesnake()">
 <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运行效果:

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

Javascript读写cookie的实例源码

Javascript读写cookie的实例源码

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

总结

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

Javascript 相关文章推荐
初探jquery——表单应用范例
Feb 20 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
Apr 04 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
Mar 16 #Javascript
vue自定义指令用法经典实例小结
Mar 16 #Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 #jQuery
基于vue通用表单解决方案的思考与分析
Mar 16 #Javascript
vue+php实现的微博留言功能示例
Mar 16 #Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 #Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 #Javascript
You might like
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
js调用flash的效果代码
2008/04/26 Javascript
jQuery 动画基础教程
2008/12/25 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
理解javascript封装
2016/02/23 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python学习资料
2007/02/08 Python
python字符串排序方法
2014/08/29 Python
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
Django框架模板语言实例小结【变量,标签,过滤器,继承,html转义】
2019/05/23 Python
Python解析json代码实例解析
2019/11/25 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
Python实现名片管理系统
2020/02/14 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
.NET remoting中对象激活的两种方式
2015/06/08 面试题
省三好学生申请材料
2014/01/22 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
2014年新教师工作总结
2014/11/08 职场文书
工作能力自我评价2015
2015/03/05 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
详解python的异常捕获
2022/03/03 Python