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里的条件判断
Feb 27 Javascript
jQuery实现的立体文字渐变效果
May 17 Javascript
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
noty ? jQuery通知插件全面解析
May 18 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
Vue实现星级评价效果实例详解
Dec 30 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 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取得一个类的属性和方法的实现代码
2011/05/22 PHP
利用PHP实现短域名互转
2013/07/05 PHP
php身份证号码检查类实例
2015/06/18 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
javascript removeChild 使用注意事项
2009/04/11 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
echarts学习笔记之图表自适应问题详解
2017/11/22 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
Java Unsafe类实现原理及测试代码
2020/09/15 Python
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
标准毕业生自荐信范文
2013/11/04 职场文书
英语教育专业自荐信
2014/05/29 职场文书
银行求职自荐信
2014/06/30 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
教师师德表现自我评价
2015/03/05 职场文书
Golang数据类型和相互转换
2022/04/12 Golang
git中cherry-pick命令的使用教程
2022/06/25 Servers