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 相关文章推荐
js/html光标定位的实现代码
Sep 23 Javascript
JS求平均值的小例子
Nov 29 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
Jan 19 Javascript
jquery遍历json对象集合详解
May 18 Javascript
JavaScript重定向URL参数的两种方法小结
Oct 19 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 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调用三种数据库的方法(3)
2006/10/09 PHP
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
JQuery EasyUI 数字格式化处理示例
2014/05/05 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
在Python中使用dict和set方法的教程
2015/04/27 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
python机器学习之随机森林(七)
2018/03/26 Python
python-pyinstaller、打包后获取路径的实例
2019/06/10 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
Python模块相关知识点小结
2020/03/09 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
中专生求职自荐信范文
2013/12/22 职场文书
小班下学期评语
2014/05/04 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
2019年教师入党申请书
2019/06/27 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
《敬重卑微》读后感3篇
2019/11/26 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
JavaScript阻止事件冒泡的方法
2021/12/06 Javascript
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL