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 03 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
jQuery的事件委托实例分析
Jul 15 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
Oct 16 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
js面向对象编程总结
Feb 16 Javascript
vue-quill-editor实现图片上传功能
Aug 08 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 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在apache环境下实现gzip配置方法
2015/04/02 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
PHP使用递归生成文章树
2015/04/21 PHP
详解WordPress中用于合成数组的wp_parse_args()函数
2015/12/18 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
HTML的select控件美化
2017/03/27 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
python 获取et和excel的版本号
2009/04/09 Python
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
Python使用Dijkstra算法实现求解图中最短路径距离问题详解
2018/05/16 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
Python封装成可带参数的EXE安装包实例
2019/08/24 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
Pandas直接读取sql脚本的方法
2021/01/21 Python
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
《长相思》听课反思
2014/04/10 职场文书
家长学校教学计划
2015/01/19 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
vue 把二维或多维数组转一维数组
2022/04/24 Vue.js