javascript学习笔记(七)利用javascript来创建和存储cookie


Posted in Javascript onApril 08, 2011

首先看一下基础知识:
1、什么是cookie
cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值
2、有关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 相关文章推荐
js 创建快捷方式的代码(fso)
Nov 19 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
js闭包的用途详解
Nov 09 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
JavaScript中this用法学习笔记
Mar 17 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
JavaScript动画实例之粒子文本的实现方法详解
Jul 28 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 #Javascript
javascript学习笔记(五)正则表达式
Apr 08 #Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 #Javascript
javascript 学习笔记(一)DOM基本操作
Apr 08 #Javascript
jQuery 名称冲突的解决方法
Apr 08 #Javascript
js 事件处理函数间的Event物件是否全等
Apr 08 #Javascript
Javascript 八进制转义字符(8进制)
Apr 08 #Javascript
You might like
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
jquery 经典动画菜单效果代码
2010/01/26 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
vue开发简单上传图片功能
2020/06/30 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
物流管理应届生求职信
2013/11/07 职场文书
化学实验员岗位职责
2013/12/28 职场文书
市场专员岗位职责
2014/02/14 职场文书
公司年会主持词
2014/03/22 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
八年级英语教学计划
2015/01/23 职场文书
合理化建议书
2015/02/04 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
python tqdm用法及实例详解
2021/06/16 Python
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js