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 相关文章推荐
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
javascript实现图像循环明暗变化的方法
Feb 25 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 Javascript
Vue中如何实现轮播图的示例代码
Jul 27 Javascript
微信小程序实现轮播图效果
Sep 07 Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
Element Alert警告的具体使用方法
Jul 27 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
Aug 04 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
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
JavaScript中的对象与JSON
2015/07/03 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
原生js封装运动框架的示例讲解
2017/10/01 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
从vue源码看props的用法
2019/01/09 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
考试不及格检讨书
2014/01/09 职场文书
学习经验交流会主持词
2014/04/01 职场文书
怎样填写就业意向
2014/04/02 职场文书
林肯就职演讲稿
2014/05/19 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
二审答辩状范文
2015/05/22 职场文书
家长意见书
2015/06/04 职场文书
孝女彩金观后感
2015/06/10 职场文书
2019学生会干事辞职信
2019/06/27 职场文书