javascript学习笔记（七）利用javascript来创建和存储cookie
更新时间：2011年04月08日 00:31:54 作者：
今天把javascript如何用来创建及存储cookie复习了一下，其中的一点体会拿出来和大家讨论，恳请高手指点一二。
首先看一下基础知识：
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>
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创建cookie、读取cookie
- asp.net通过js实现Cookie创建以及清除Cookie数组的代码
- 什么是cookie?js手动创建和存储cookie
- javascript创建和存储cookie示例
- JavaScript创建、读取和删除cookie
- JavaScript创建一个欢迎cookie弹出窗实现代码
- JS设置cookie、读取cookie、删除cookie
- JS操作Cookies包括(读取添加与删除)
- JS保存和删除cookie操作 判断cookie是否存在
- javascript js cookie的存储,获取和删除
- javascript cookies 设置、读取、删除实例代码
- js实现操作cookie的常见方法总结【创建、读取、删除】
相关文章
javascript Array.prototype.slice的使用示例
javascript Array.prototype.slice除了常见的从某个数组中抽取出新的数组外，它还有一些其他的用法,下面就为大家讲这些妙用2013-11-11
JavaScript 早已不只是一门写写网页特效的脚本语言了，如今广泛用于网站的前端交互。2011-04-04
判断语句这个我们不陌生,就是判断是否满足指定的条件,如果满足则执行一定的代码,否则跳过,下面这篇文章主要给大家介绍了关于JavaScript中判断的优雅写法,需要的朋友可以参考下2021-10-10
数组扁平化是指将一个多维数组变为一维数组,下面这篇文章主要给大家介绍了关于JavaScript面试之如何实现数组拍平（扁平化）方法的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-11-11
本篇文章主要介绍了JS如何设置元素样式的方法示例，主要介绍了三种方法，具有一定的参考价值，有兴趣的可以了解一下2017-08-08
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
这篇文章主要介绍了微信JS-SDK自定义分享功能,结合实例形式分析了基于JS-SDK接口实现的分享给朋友及分享到朋友圈等功能的相关配置文件与数据操作技巧,需要的朋友可以参考下2016-11-11
本文将详细介绍Canvas + JavaScript 制作图片粒子效果的方法。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了JavaScript执行机制，想要搞懂JavaScript执行机制，便与进程与线程的概念脱不了干系，下面我们就来看看这JavaScript执行机制的具体介绍吧,需要的朋友可以参考一下2022-08-08
如果说让JavaScript读取站点上一文本文件,那不过是个再简单不了的事了；但若说要换成一个二进制的文件，并且是完全静态的读取,那似乎有点天方夜谭了。2009-04-04
刚看到笑看风云写的JavaScript面向对象(极简主义法)和一个分解url参数面试题，我作了一下修改，记录下来2012-08-08
最新评论