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 相关文章推荐
javascript修改表格背景色实例代码分享
Dec 10 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
基于JavaScript实现全选、不选和反选效果
Feb 15 Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
Jun 10 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
JS实现简易计算器
Feb 14 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 Javascript
JavaScript实现网页留言板功能
Nov 23 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 获取可变函数参数的函数
2009/08/26 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
jquery isType() 类型判断代码
2011/02/14 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
利用JS实现数字增长
2016/07/28 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
VUE中v-model和v-for指令详解
2017/06/23 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
Python自定义线程池实现方法分析
2018/02/07 Python
使用Python写一个小游戏
2018/04/02 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
python如何输出反斜杠
2020/06/18 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
什么是命名空间(NameSpace)
2015/11/24 面试题
保荐人的岗位职责
2013/11/19 职场文书
房屋转让协议书
2014/04/11 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书