今天把javascript如何用来创建及存储cookie复习了一下,其中的一点体会拿出来和大家讨论,首先看一下基础知识:
什么是cookie
cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。
有关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部分代码:
02 |
function setCookie(name, value, expireday) { |
04 |
exp.setTime(exp.getTime() + expireday*24*60*60*1000); |
05 |
document.cookie = name+ "=" +escape(value)+ "; expires" + "=" +exp.toGMTString(); |
08 |
function getCookie(name) { |
09 |
var cookieStr = document.cookie; |
10 |
if (cookieStr.length > 0) { |
11 |
var cookieArr = cookieStr.split( ";" ); |
12 |
for ( var i=0; i<cookieArr.length; i++) { |
13 |
var cookieVal = cookieArr[i].split( "=" ); |
14 |
if (cookieVal[0] == name) { |
15 |
return unescape(cookieVal[1]); |
21 |
function checkCookie() { |
22 |
var cookieUser = document.getElementById( "cookieUser" ); |
23 |
var userName = getCookie( "userName" ); |
25 |
cookieUser.innerHTML = "您好" +userName+ ",欢迎再次回来!" ; |
27 |
var value = prompt( "请输入用户名" , "" ); |
29 |
setCookie( 'userName' , value, 1); |
主要在于如何提取我们需要的cookie信息,在本例的getCookie函数中主要是将cookie信息转化成数组的方式来查找我们需要提取的cookie值。还可以通过正则表达式的方式来匹配,如下:
1 |
function getCookie(name) { |
2 |
var cookieStr = document.cookie; |
3 |
var cookieArr = cookieStr.match( new RegExp(name+ "=[a-zA-Z0-9]*;$" )); |
4 |
var cookieVal = cookieArr.split( "=" ); |
5 |
if (cookieVal[0] == name) { |
6 |
return unescape(cookieVal[1]); |
比如在这个例子中,如果打开浏览器中没有存储名为userName的cookie,则会提示用户输入用户名,再次刷新页面时则会显示输入的cookie值。 最后我们可以测试一下代码:
1 |
< body onload = "checkCookie()" > |
2 |
< p id = "cookieUser" ></ p > |