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 相关文章推荐
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
javascript编写简易计算器
May 06 Javascript
EasyUI创建人员树的实例代码
Sep 15 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
js中DOM事件绑定分析
Mar 18 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 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中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
javascript hashtable 修正版 下载
2010/12/30 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
vue实现拖拽效果
2019/12/23 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
浅析使用Python操作文件
2017/07/31 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
python2与python3共存问题的解决方法
2018/09/18 Python
解决python中 f.write写入中文出错的问题
2018/10/31 Python
用python爬取租房网站信息的代码
2018/12/14 Python
Python调用服务接口的实例
2019/01/03 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
详解Python 函数如何重载?
2019/04/23 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
土木工程毕业生推荐信
2013/10/28 职场文书
计算机专业毕业生求职信
2014/04/30 职场文书
美术社团活动总结
2014/06/27 职场文书
党支部特色活动方案
2014/08/20 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server
Java 多线程并发FutureTask
2022/06/28 Java/Android
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技