javascript 操作 cookies

Cookies,有些人喜欢它们,有些人憎恨它们。但是,很少有人真正知道如何使用它们。现在你可以成为少数人中的成员-可以自傲的Cookie大师。

如果你象作者一样记性不好,那么你可能根本记不住人们的名字。我遇到人时,多半只是点点头,问句吃了嘛!,而且期望问候到此为止。如果还需要表示些什么,那么我就得求助于一些狡猾的技巧,好让我能想对方是谁。比如胡扯起一些和对方有关的人,不管他们之间关系多远,只要能避免不记得对方名字的尴尬就好:你隔壁邻居的侄子的可爱小狗迈菲斯特怎么样?通过这个方法,我希望能让对方感到,我确实很重视他(她),甚至还记得这些琐事,虽然实际上连名字都忘记了。但是,不是我不重视,而是我的记忆力实在是糟糕,而且要记住的名字又实在太多。如果我能给每个人设置cookies,那么我就不会再犯这种记忆力问题了。

在这篇文章里,我们要学习:

1.
什么是Cookies?
2.Cookie
的构成
3.
操纵Cookies
4.Cookie
怪兽

什么是Cookies?

你会问,什么是cookies?cookie是浏览器保存在用户计算机上的少量数据。它与特定的WEB页或WEB站点关联起来,自动地在WEB浏览器和WEB服务器之间传递。

比如,如果你运行的是Windows操作系统,使用InternetExplorer上网,那么你会发现在你的“Windows”目录下面有一个子目录,叫做“TemporaryInternetFiles”。如果你有空看看这个目录,就会发现里面有一些文件,文件名称看起来就象电子邮件地址。比如在我机器上的这个目录里,就有“jim@support.microsoft.com”这样的文件。这是一个cookie文件,这个文件从哪来呢?猜一猜,它来自微软的支持站点。顺便说一句,这不是我的电子邮件地址,特此澄清。

对于管理细小的、不重要的、不想保存在中央数据库里的细节信息,Cookies是个很不错的方案。(这不是说大家的名字不重要。)比如,目前网站上不断增长的自定义服务,可以为每个用户定制他们要看的内容。如果你设计的就是这样一个站点,那么你怎么来管理这样的信息:一个用户喜欢绿色的菜单条,而另一个喜欢红色的。确实是个累人的问题。不过,这样的信息,可以很安全地记录到cookie,并保存在用户的计算机上,而你自己的数据库空间可以留给更长久更有意义的数据。

FYI:Cookies
对于安全用途,通常很有用。我不想在此就这一问题过于深入,只是提供一个示例,可以看到如何使用在一段时间之后过期的cookies来保证站点安全:

1.
使用用户名和口令,通过SSL登录。
2.
服务器的数据库里检查用户名和口令。如果登录成功,建立一个当前时间标签的消息摘要(比如MD5),并把它保存在cookie服务器数据库里。把用户的登录时间保存在服务器数据库里面的用户记录里。
3.
在进行每个安全事务时(用户处于登录状态的任何事务),把cookie的消息摘要和保存在服务器数据库里的摘要进行比较,如果比较失败,就把用户引导到登录界面。
4.
如果第3步检查通过,那么检查当前时间和登录时间之音经过的时间是否超过允许的时间长度。如果用户已经超时,那么就把用户引到登录界面。
5.
如果第3步和第4步都通过了,那么把登录时间重新设置成当前时间,允许事务发生。那些需要你登录的安全站点,可能多数使用的都是和这里介绍的类似的方法。
Cookie
的构成

Cookies
最初设计时,是为了CGI编程。但是,我们也可以使用Javascript脚本来操纵cookies。在本文里,我们将演示如何使用Javascript脚本来操纵cookies(如果有需求,我可能会在以后的文章里介绍如何使用Perl进行cookie管理。但是如果实在等不得,那么我现在就教你一手:仔细看看CGI.pm。在这个CGI包里有一个cookie()函数,可以用它建立cookie。但是,还是让我们先来介绍cookies的本质。

Javascript脚本里,一个cookie实际就是一个字符串属性。当你读取cookie的值时,就得到一个字符串,里面当前WEB页使用的所有cookies的名称和值。每个cookie除了name名称和value值这两个属性以外,还有四个属性。这些属性是:expires过期时间、path路径、domain域、以及secure安全。

Expires–
过期时间。指定cookie的生命期。具体是值是过期日期。如果想让cookie的存在期限超过当前浏览器会话时间,就必须使用这个属性。当过了到期日期时,浏览器就可以删除cookie文件,没有任何影响。

Path–
路径。指定与cookie关联的WEB页。值可以是一个目录,或者是一个路径。如果http://www.jzxue.com/html/java/建立了一个cookie,那么在http://www.jzxue.com/html/java/目录里的所有页面,以及该目录下面任何子目录里的页面都可以访问这个cookie。这就是说,在http://www.jzxue.com/html/java/stories/articles里的任何页面都可以访问http://www.jzxue.com/html/java/index.html建立的cookie。但是,如果http://www.jzxue.com/html/asp/需要访问http://www.jzxue.com/html/java/index.html设置的cookes,该怎么办?这时,我们要把cookiespath属性设置成“/”。在指定路径的时候,凡是来自同一服务器URL里有相同路径的所有WEB页面都可以共享cookies。现在看另一个例子:如果想让http://www.jzxue.com/devhead/filters/http://www.jzxue.com/devhead/stories/共享cookies,就要把path设成“/devhead”

Domain–
域。指定关联的WEB服务器或域。值是域名,比如jzxue.com。这是对path路径属性的一个延伸。如果我们想让catalog.mycompany.com能够访问shoppingcart.mycompany.com设置的cookies,该怎么办?我们可以把domain属性设置成“mycompany.com”,并把path属性设置成“/”FYI:不能把cookies域属性设置成与设置它的服务器的所在域不同的值。

Secure–
安全。指定cookie的值通过网络如何在用户和WEB服务器之间传递。这个属性的值或者是“secure”,或者为空。缺省情况下,该属性为空,也就是使用不安全的HTTP连接传递数据。如果一个cookie标记为secure,那么,它与WEB服务器之间就通过HTTPS或者其它安全协议传递数据。不过,设置了secure属性不代表其他人不能看到你机器本地保存的cookie。换句话说,把cookie设置为secure,只保证cookieWEB服务器之间的数据传输过程加密,而保存在本地的cookie文件并不加密。如果想让本地cookie也加密,得自己加密数据。


操纵Cookies

请记住,cookie就是文档的一个字符串属性。要保存cookie,只要建立一个字符串,格式是name=<value>(名称=值),然后把文档的document.cookie设置成与它相等即可。比如,假设想保存表单接收到的用户名,那么代码看起来就象这样:

document.cookie="username"+escape(form.username.value);

在这里,使用escape()函数非常重要,因为cookie值里可能包含分号、逗号或者空格。这就是说,在读取cookie值时,必须使用对应的unescape()函数给值解码。我们当然还得介绍cookie的四个属性。这些属性用下面的格式加到字符串值后面:

name=<value>[;expires=<date>][;domain=<domain>][;path=<path>][;secure]

名称=<>[;expires=<日期>][;domain=<>][;path=<路径>][;安全]

<value>,<date>,<domain>
<path>应当用对应的值替换。<date>应当使用GMT格式,可以使用Javascript脚本语言的日期类Date.toGMTString()方法得到这一GMT格式的日期值。方括号代表这项是可选的。比如在[;secure]两边的方括号代表要想把cookie设置成安全的,就需要把";secure"加到cookie字符串值的后面。如果";secure"没有加到cookie字符串后面,那么这个cookie就是不安全的。不要把尖括号<>和方括号[]加到cookie里(除非它们是某些值的内容)。设置属性时,不限属性,可以用任何顺序设置。

下面是一个例子,在这个例子里,cookie"username"被设置成在15分钟之后过期,可以被服务器上的所有目录访问,可以被"mydomain.com"域里的所有服务器访问,安全状态为安全。

//Date()
的构造器设置以毫秒为单位
//.getTime()
方法返回时间,单位为毫秒
//
所以要设置15分钟到期,要用60000毫秒乘15分钟
varexpiration=newDate((newDate()).getTime()+15*60000);
document.cookie="username="+escape(form.username.value)+";expires="
+expiration.toGMTString()+";path="+"/"+";_
domain="+"mydomain.com"+";secure";

读取cookies值有点象个小把戏,因为你一次就得到了属于当前文档的所有cookies

//
下面这个语句读取了属于当前文档的所有cookies
varallcookies=document.cookie;

现在,我们得解析allcookies变量里的不同cookies,找到感兴趣的指定cookie。这个工作很简单,因为我们可以利用Javascript语言提供的扩展字符串支持。

如果我们对前面分配的cookie"username"感兴趣,可以用下面的脚本来读取它的值。

//
我们定义一个函数,用来读取特定的cookie值。
functiongetCookie(cookie_name)
{
varallcookies=document.cookie;
varcookie_pos=allcookies.indexOf(cookie_name);

//
如果找到了索引,就代表cookie存在,
//
反之,就说明不存在。
if(cookie_pos!=-1)
{
//
cookie_pos放在值的开始,只要给值加1即可。
cookie_pos+=cookie_name.length+1;
varcookie_end=allcookies.indexOf(";",cookie_pos);

if(cookie_end==-1)
{
cookie_end=allcookies.length;
}

varvalue=unescape(allcookies.substring(cookie_pos,cookie_end));
}

returnvalue;
}

//
调用函数
varcookie_val=getCookie("username");

上面例程里的cookie_val变量可以用来生成动态内容,或者发送给服务器CGI脚本进行处理。现在你知道了使用Javascript脚本操纵cookies的基本方法。但是,如果你跟我一样,那么我们要做的第一件事,就是建立一些接口函数,把cookies处理上的麻烦隐藏起来。不过,在你开始编程之前,稍候片刻。这些工作,早就有人替你做好了。你要做的,只是到哪去找这些接口函数而已。

比如,在DavidFlanganJavascript:TheDefinitiveGuide3rdEd.这本书里,可以找到很好的cookie应用类。你也可以在OreillyWEB站点上找到这本书里的例子。本文最后的链接列表里,有一些访问这些cookie示例的直接链接。



Cookies
怪兽

因为某些原因Cookies的名声很不好。许多人利用cookies做一些卑鄙的事情,比如流量分析、点击跟踪。Cookies也不是非常安全,特别是没有secure属性的cookies。不过,即使你用了安全的cookies,如果你和别人共用计算机,比如在网吧,那么别人就可以窥探计算机硬盘上未加密保存的cookie文件,也就有可能窃取你的敏感信息。所以,如果你是一个WEB开发人员,那么你要认真考虑这些问题。不要滥用cookies。不要把用户可能认为是敏感的数据保存在cookies里。如果把用户的社会保险号、信用卡号等保存在cookie里,等于把这些敏感信息放在窗户纸下,无异于把用户投到极大危险之中。一个好的原则是,如果你不想陌生人了解你的这些信息,那就不要把它们保存在cookies里。

另外,cookies还有一些实际的限制。Cookies保留在计算机上,不跟着用户走。如果用户想换计算机,那么新计算机无法得到原来的cookie。甚至用户在同一台计算机上使用不同浏览器,也得不到原来的cookieNetscape不能读取InternetExplorercookies

还有,用户也不愿意接受cookies。所以不要以为所有的浏览器都能接受你发出的cookies。如果浏览器不接受cookies,你要保证自己的WEB站点不致因此而崩溃或中断。

另外WEB浏览器能保留的cookies不一定能超过300个。也没有标准规定浏览器什么时候、怎么样作废cookies。所以达到限制时,浏览器能够有效地随机删除cookies。浏览器保留的来自一个WEB服务器上的cookies,不超过20个,每个cookie的数据(包括名称和值),不超过4K字节。(不过,本文里的cookie尺寸没问题,它只占了12K字节,保存在33cookies里。)

简而言之,注意保持cookie简单。不要依赖cookies的存在,不要在每个cookie里保存太多信息。不要保存太多的cookes。但是,抛除这些限制,在技巧高超的WEB管理员手里,cookie的概念是一个有用的工具。

外部链接
每个Javascript程序员都应当有一份JavascriptDavidFlanaganTheDefinitiveGuide这本书里找到cookie类例程可以帮助你把不止一个变量编码到

单一的cookie,克服掉每个WEB服务器20cookies的限制

写入和读取Cookie是一种常见的功能,可惜JavaScript对此的直接支持并不算完善,下面是几个操作Cookie的函数,用起来还是蛮方便的。

// utility function to retrieve an expiration date in proper

// format; pass three integer parameters for the number of days, hours,

// and minutes from now you want the cookie to expire (or negative

// values for a past date); all three parameters are required,

// so use zeros where appropriate

function getExpDate(days, hours, minutes) {

var expDate = new Date( );

if (typeof days == "number" && typeof hours == "number" &&

typeof hours == "number") {

expDate.setDate(expDate.getDate( ) + parseInt(days));

expDate.setHours(expDate.getHours( ) + parseInt(hours));

expDate.setMinutes(expDate.getMinutes( ) + parseInt(minutes));

return expDate.toGMTString( );

}

}

// utility function called by getCookie( )

function getCookieVal(offset) {

var endstr = document.cookie.indexOf (";", offset);

if (endstr == -1) {

endstr = document.cookie.length;

}

return unescape(document.cookie.substring(offset, endstr));

}

// primary function to retrieve cookie by name

function getCookie(name) {

var arg = name + "=";

var alen = arg.length;

var clen = document.cookie.length;

var i = 0;

while (i < clen) {

var j = i + alen;

if (document.cookie.substring(i, j) == arg) {

return getCookieVal(j);

}

i = document.cookie.indexOf(" ", i) + 1;

if (i == 0) break;

}

return "";

}

// store cookie value with optional details as needed

function setCookie(name, value, expires, path, domain, secure) {

document.cookie = name + "=" + escape (value) +

((expires) ? "; expires=" + expires : "") +

((path) ? "; path=" + path : "") +

((domain) ? "; domain=" + domain : "") +

((secure) ? "; secure" : "");

}

// remove the cookie by setting ancient expiration date

function deleteCookie(name,path,domain) {

if (getCookie(name)) {

document.cookie = name + "=" +

((path) ? "; path=" + path : "") +

((domain) ? "; domain=" + domain : "") +

"; expires=Thu, 01-Jan-70 00:00:01 GMT";

}

}

将上面的几个js命名为cookie.js,下面演示其基本用法

<script type="text/javascript" src="cookie.js"></script>

<script type="text/javascript">

function foo()

{

var name = document.getElementById("name").value;

if(name)

{

setCookie("name",name);

}

document.getElementById("show").innerHTML+=("NEWEST NAME :"+ getCookie("name") + "<br>");

}

</script>

Chapter 1.9 example

<br>

<input type="text" id="name" size="20" />

<input type="button" value="setCookie" onclick="foo()" />

<div id="show"></div>

可以同时开两个窗口看看,输入框不输入值,按按钮相当于察看当前cookie

/cookies函数作者:翟振凯

function SetCookie(name,value)//两个参数,一个是cookie的名子,一个是值
{
var Days = 30; //
cookie将被保存30
var exp= new Date(); //new Date("December 31, 9998");
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getCookie(name)//
cookies函数
{
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) return unescape(arr[2]); return null;

}
function delCookie(name)//
删除cookie
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

SetCookie ("xiaoqi", "3")
alert(getCookie('xiaoqi'));
</script>

一个非常实用的javascript读写Cookie函数

一个非常实用的javascript读写Cookie函数
functionGetCookieVal(offset)
//
获得Cookie解码后的值
{
varendstr=documents.cookie.indexOf(";",offset);
if(endstr==-1)
endstr=documents.cookie.length;
returnunescape(documents.cookie.substring(offset,endstr));
}
functionSetCookie(name,value)
//
设定Cookie
{
varexpdate=newDate();
varargv=SetCookie.arguments;
varargc=SetCookie.arguments.length;
varexpires=(argc>2)?argv[2]:null;
varpath=(argc>3)?argv[3]:null;
vardomain=(argc>4)?argv[4]:null;
varsecure=(argc>5)?argv[5]:false;
if(expires!=null)expdate.setTime(expdate.getTime()+(expires*1000));
documents.cookie=name+"="+escape(value)+((expires==null)?"":(";expires="+expdate.toGMTString()))
+((path==null)?"":(";path="+path))+((domain==null)?"":(";domain="+domain))
+((secure==true)?";secure":"");
}
functionDelCookie(name)
//
删除Cookie
{
varexp=newDate();
exp.setTime(exp.getTime()-1);
varcval=GetCookie(name);
documents.cookie=name+"="+cval+";expires="+exp.toGMTString();
}
functionGetCookie(name)
//
获得Cookie的原始值
{
vararg=name+"=";
varalen=arg.length;
varclen=documents.cookie.length;
vari=0;
while(i<clen)
{
varj=i+alen;
if(documents.cookie.substring(i,j)==arg)
returnGetCookieVal(j);
i=documents.cookie.indexOf("",i)+1;
if(i==0)break;
}
returnnull;
}

<SCRIPTlanguage="javascript">
<!--
functionopenpopup(){
url="popup.htm"
window.open("gonggao.htm","gonggao","width=260,height=212,left=200,top=0")
}

functionget_cookie(Name){
varsearch=Name+"="
varreturnvalue="";
if(documents.cookie.length>0){
offset=documents.cookie.indexOf(search)
if(offset!=-1){
offset+=search.length
end=documents.cookie.indexOf(";",offset);
if(end==-1)
end=documents.cookie.length;
returnvalue=unescape(documents.cookie.substring(offset,end))
}
}
returnreturnvalue;
}

functionhelpor_net(){
if(get_cookie('popped')==''){
openpopup()
documents.cookie="popped=yes"
}
}
helpor_net()
//-->
</SCRIPT>

如果点了确定,只要不清cookie,以后访问都不会再提示,如果不点确定则每次都会提示。放在js文件里,全站包含

<SCRIPT LANGUAGE="JavaScript">
<!--
var the_cookie = document.cookie;
var broken_cookie = the_cookie.split(":");
var the_visiteraccepted = unescape(broken_cookie[1]);
//
if (the_visiteraccepted=="undefined"){
var tmp=confirm('
中国人何时何地。');
if(tmp==false){
window.close();
}else{
var the_visiteraccepted = 1;
var the_cookie = "ILoveChina=visiteraccepted:" + escape(the_visiteraccepted);
document.cookie = the_cookie;
}
}
//-->
</SCRIPT>

1. Cookie的兼容性问题

Cookie的格式有2个不同的版本,第一个版本,我们称为Cookie Version 0,是最初由Netscape公司制定的,也被几乎所有的浏览器支持。而较新的版本,Cookie Version 1,则是根据RFC 2109文档制定的。为了确保兼容性,JAVA规定,前面所提到的涉及Cookie的操作都是针对旧版本的Cookie进行的。而新版本的Cookie目前还不被Javax.servlet.http.Cookie包所支持。

2. Cookie的内容

同样的Cookie的内容的字符限制针对不同的Cookie版本也有不同。在Cookie Version 0中,某些特殊的字符,例如:空格,方括号,圆括号,等于号(=),逗号,双引号,斜杠,问号,@符号,冒号,分号都不能作为Cookie的内容。这也就是为什么我们在例子中设定Cookie的内容为"Test_Content"的原因。

虽然在Cookie Version 1规定中放宽了限制,可以使用这些字符,但是考虑到新版本的Cookie规范目前仍然没有为所有的浏览器所支持,因而为保险起见,我们应该在Cookie的内容中尽量避免使用这些字符

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值