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级联下拉列表实例代码(自写)
May 10 Javascript
jquery控制左右箭头滚动图片列表的实例
May 20 Javascript
详解JavaScript函数绑定
Aug 18 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
JavaScript类的写法
Sep 17 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
微信小程序登录换取token的教程
May 31 Javascript
js中Array对象的常用遍历方法详解
Jan 17 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表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
JS 控制非法字符的输入代码
2009/12/04 Javascript
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
两个select多选模式的选项相互移动(示例代码)
2014/01/11 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
讲解Python中fileno()方法的使用
2015/05/24 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
python 实用工具状态机transitions
2020/11/21 Python
python链表类中获取元素实例方法
2021/02/23 Python
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
应届生的求职推荐信范文
2013/11/30 职场文书
计算机专业毕业生自荐信
2013/12/31 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
入团介绍人意见范文
2015/06/04 职场文书
单位工资证明范本
2015/06/12 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers