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 相关文章推荐
用正则xmlHttp实现的偷(转)
Jan 22 Javascript
翻译整理的jQuery使用查询手册
Mar 07 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
在JavaScript并非所有的一切都是对象
Apr 11 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
jQuery的事件预绑定
Dec 05 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
Vuex入门到上手教程
Jun 20 Javascript
JS实现根据详细地址获取经纬度功能示例
Apr 16 Javascript
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
PHP可变函数的使用详解
2013/06/14 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
javascript中的float运算精度实例分析
2010/08/21 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
js实现精确到秒的日期选择器完整实例
2016/04/30 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
node.js 发布订阅模式的实例
2017/09/10 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
vue中render函数的使用详解
2018/10/12 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
Python中的闭包总结
2014/09/18 Python
解决python replace函数替换无效问题
2020/01/18 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
青年教师典范事迹材料
2014/01/31 职场文书
党员公开承诺书范文
2014/03/25 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
邀请函的格式
2015/01/30 职场文书
会计求职信怎么写
2015/03/20 职场文书
民主生活会意见
2015/06/05 职场文书
关爱空巢老人感想
2015/08/11 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript
千万级用户系统SQL调优实战分享
2022/03/03 MySQL
asyncio异步编程之Task对象详解
2022/03/13 Python