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 相关文章推荐
javascript 隔行换色函数代码
Oct 24 Javascript
javascript 学习笔记(onchange等)
Nov 14 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
深入理解Angular2 模板语法
Aug 07 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
Javascript中弹窗confirm与prompt的区别
Oct 26 Javascript
vue点击自增和求和的实例代码
Nov 06 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
微信小程序实现星级评价
Nov 20 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 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
重置版战役片段
2020/04/09 魔兽争霸
php session 错误
2009/05/21 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
YII框架http缓存操作示例
2019/04/29 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
在Python中使用glob模块查找文件路径的方法
2015/06/17 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
基于JS实现数字动态变化显示效果附源码
2019/07/18 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
微信小程序如何实现五星评价功能
2019/10/15 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
python3 shelve模块的详解
2017/07/08 Python
Python使用matplotlib绘制余弦的散点图示例
2018/03/14 Python
Linux下Python安装完成后使用pip命令的详细教程
2018/11/22 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
python实现实时视频流播放代码实例
2020/01/11 Python
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
西部世纪面试题
2014/12/05 面试题
房地产销售计划书
2014/01/10 职场文书
元旦晚会邀请函
2014/02/01 职场文书
企业宣传工作方案
2014/06/02 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
加强干部作风建设整改方案
2014/10/24 职场文书
工作失职检讨书范文
2015/05/05 职场文书
有关朝花夕拾的读书笔记
2015/06/29 职场文书
MongoDB支持的数据类型
2022/04/11 MongoDB
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis