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下操作css的float属性的特殊写法
Aug 22 Javascript
Jquery下判断Id是否存在的代码
Jan 06 Javascript
各浏览器对click方法的支持差异小结
Jul 31 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
javascript简单判断输入内容是否合法的方法
May 11 Javascript
dul无法加载bootstrap实现unload table/user恢复
Sep 29 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
PHP+DBM的同学录程序(4)
2006/10/09 PHP
php在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
PHP 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
php邮件发送的两种方式
2020/04/28 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
jquery 学习之一 对象访问
2010/11/23 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
十大热门的JavaScript框架和库
2017/03/21 Javascript
vue的token刷新处理的方法
2018/07/17 Javascript
Vue.extend实现挂载到实例上的方法
2019/05/01 Javascript
微信js-sdk 录音功能的示例代码
2019/11/01 Javascript
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
python实现简单的五子棋游戏
2020/09/01 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
中班上学期幼儿评语
2014/04/30 职场文书
警察群众路线整改措施
2014/09/26 职场文书
现役军人家属慰问信
2015/03/24 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle
Python实现Hash算法
2022/03/18 Python