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 异步页面查询实现代码(asp.net)
May 26 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
JS Math对象与Math方法实例小结
Jul 05 Javascript
谈谈JavaScript中的函数
Sep 08 Javascript
Vue实现下拉加载更多
May 09 Vue.js
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
MySQL数据库转移,access,sql server 转 MySQL 的图文教程
2007/09/02 PHP
php 学习资料零碎东西
2010/12/04 PHP
php简单实现数组分页的方法
2016/04/30 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
laravel开发环境homestead搭建过程详解
2020/07/03 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
excel操作之Add Data to a Spreadsheet Cell
2007/06/12 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
js实现的复制兼容chrome和IE
2014/04/03 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
JavaScript编码小技巧分享
2020/09/17 Javascript
Python编程语言的35个与众不同之处(语言特征和使用技巧)
2014/07/07 Python
Django框架中方法的访问和查找
2015/07/15 Python
python实现媒体播放器功能
2018/02/11 Python
python 接口返回的json字符串实例
2018/03/27 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
python基于opencv实现人脸识别
2021/01/04 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
python实现学生通讯录管理系统
2021/02/25 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
阿玛尼美妆俄罗斯官网:Giorgio Armani Beauty RU
2020/07/19 全球购物
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
越南母婴用品购物网站:Kids Plaza
2020/04/09 全球购物
军训 自我鉴定
2014/02/03 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书