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 相关文章推荐
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
JS函数重载的解决方案
May 13 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
javascript创建对象的几种模式介绍
May 06 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
vue单应用在ios系统中实现微信分享功能操作
Sep 07 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合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
基于JQuery的抓取博客园首页RSS的代码
2011/12/01 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
2013/10/08 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
[09:43]DOTA2每周TOP10 精彩击杀集锦vol.5
2014/06/25 DOTA
python开发之文件操作用法实例
2015/11/13 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
Python callable内置函数原理解析
2020/03/05 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
Android面试题附答案
2014/12/08 面试题
教师简历自我评价
2014/02/03 职场文书
自主招生专家推荐信
2015/03/26 职场文书
公司文体活动总结
2015/05/07 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
java executor包参数处理功能 
2022/02/15 Java/Android