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实现简单的Canvas画图实例
Jul 04 Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
JavaScript函数模式详解
Nov 07 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
Sep 12 Javascript
js实现页面图片消除效果
Mar 24 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/02/17 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
Prototype ObjectRange对象学习
2009/07/19 Javascript
JavaScript 拾漏补遗
2009/12/27 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
10个很棒的jQuery代码片段
2015/09/24 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
Angular 4依赖注入学习教程之ValueProvider的使用(七)
2017/06/04 Javascript
JavaScrip数组删除特定元素的几种方法总结
2017/09/06 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
python字符串编码识别模块chardet简单应用
2015/06/15 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
python实现简易云音乐播放器
2018/01/04 Python
Python实现基于POS算法的区块链
2018/08/07 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
numpy:找到指定元素的索引示例
2019/11/26 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
电气自动化专业职业规划范文
2014/02/16 职场文书
服装店营销方案
2014/03/10 职场文书
法律专业自荐信
2014/06/03 职场文书
运动会广播稿50字-100字
2014/10/11 职场文书
2014年度安全工作总结
2014/12/04 职场文书
如何写辞职书
2015/02/26 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
python - asyncio异步编程
2021/04/06 Python
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL