JS中cookie的介绍和操作【详细】

设置cookie
每个cookie都是一个名/值对，可以把下面这样一个字符串赋值给document.cookie：
document.cookie="userId=828";
如果要一次存储多个名/值对，可以使用分号加空格（; ）隔开，例如：
document.cookie="userId=828; userName=hulk";
在cookie的名或值中不能使用分号（;）、逗号（,）、等号（=）以及空格。在cookie的名中做到这点很容易，但要保存的值是不确定的。如何来存 储这些值呢？方法是用escape()函数进行编码，它能将一些特殊符号使用十六进制表示，例如空格将会编码为“20%”，从而可以存储于cookie值 中，而且使用此种方案还可以避免中文乱码的出现。例如：
document.cookie="str="+escape("I love ajax");
相当于：
document.cookie="str=I%20love%20ajax";
当使用escape()编码后，在取出值以后需要使用unescape()进行解码才能得到原来的cookie值，这在前面已经介绍过。
尽管document.cookie看上去就像一个属性，可以赋不同的值。但它和一般的属性不一样，改变它的赋值并不意味着丢失原来的值，例如连续执行下面两条语句：
document.cookie="userId=828";
document.cookie="userName=hulk";
这时浏览器将维护两个cookie，分别是userId和userName，因此给document.cookie赋值更像执行类似这样的语句：
document.addcookie("userId=828");
document.addcookie("userName=hulk");
事实上，浏览器就是按照这样的方式来设置cookie的，如果要改变一个cookie的值，只需重新赋值，例如：
document.cookie="userId=929";
这样就将名为userId的cookie值设置为了929。

获取cookie的值
下面介绍如何获取cookie的值。cookie的值可以由document.cookie直接获得：
var strcookie=document.cookie;
这将获得以分号隔开的多个名/值对所组成的字符串，这些名/值对包括了该域名下的所有cookie。例如：
<script language="JavaScript" type="text/JavaScript">
<!--
document.cookie="userId=828";
document.cookie="userName=hulk";
var strcookie=document.cookie;
alert(strcookie);
//-->
</script>
图7.1显示了输出的cookie值。由此可见，只能够一次获取所有的cookie值，而不能指定cookie名称来获得指定的值，这正是处理 cookie值最麻烦的一部分。用户必须自己分析这个字符串，来获取指定的cookie值，例如，要获取userId的值，可以这样实现：
<script language="JavaScript" type="text/JavaScript">
<!--
//设置两个cookie
document.cookie="userId=828";
document.cookie="userName=hulk";
//获取cookie字符串
var strcookie=document.cookie;
//将多cookie切割为多个名/值对
var arrcookie=strcookie.split("; ");
var userId;
//遍历cookie数组，处理每个cookie对
for(var i=0;i<arrcookie.length;i++){
      var arr=arrcookie[i].split("=");
      //找到名称为userId的cookie，并返回它的值
      if("userId"==arr[0]){
             userId=arr[1];
             break;
      }
}
alert(userId);
//-->
</script>
这样就得到了单个cookie的值

用类似的方法，可以获取一个或多个cookie的值，其主要的技巧仍然是字符串和数组的相关操作。

给cookie设置终止日期
到现在为止，所有的cookie都是单会话cookie，即浏览器关闭后这些cookie将会丢失，事实上这些cookie仅仅是存储在内存中，而没有建立相应的硬盘文件。
在实际开发中，cookie常常需要长期保存，例如保存用户登录的状态。这可以用下面的选项来实现：
document.cookie="userId=828; expires=GMT_String";
其中GMT_String是以GMT格式表示的时间字符串，这条语句就是将userId这个cookie设置为GMT_String表示的过期时间，超过这个时间，cookie将消失，不可访问。例如：如果要将cookie设置为10天后过期，可以这样实现：
<script language="JavaScript" type="text/JavaScript">
<!--
//获取当前时间
var date=new Date();
var expireDays=10;
//将date设置为10天以后的时间
date.setTime(date.getTime()+expireDays*24*3600*1000);
//将userId和userName两个cookie设置为10天后过期
document.cookie="userId=828; userName=hulk; expire="+date.toGMTString();
//-->
</script>

删除cookie
为了删除一个cookie，可以将其过期时间设定为一个过去的时间，例如：
<script language="JavaScript" type="text/JavaScript">
<!--
//获取当前时间
var date=new Date();
//将date设置为过去的时间
date.setTime(date.getTime()-10000);
//将userId这个cookie删除
document.cookie="userId=828; expire="+date.toGMTString();
//-->
</script>

指定可访问cookie的路径
默认情况下，如果在某个页面创建了一个cookie，那么该页面所在目录中的其他页面也可以访问该cookie。如果这个目录下还有子目录，则在子目录中也可以访问。例如在www.xxxx.com/html/a.html 中所创建的cookie，可以被 www.xxxx.com/html/b.html 或 www.xxx.com/ html/ some/c.html所访问，但不能被 www.xxxx.com/d.html 访问。
为了控制cookie可以访问的目录，需要使用path参数设置cookie，语法如下：
document.cookie="name=value; path=cookieDir";
其中cookieDir表示可访问cookie的目录。例如：
document.cookie="userId=320; path=/shop";
就表示当前cookie仅能在shop目录下使用。
如果要使cookie在整个网站下可用，可以将cookie_dir指定为根目录，例如：
document.cookie="userId=320; path=/";

指定可访问cookie的主机名
和路径类似，主机名是指同一个域下的不同主机，例如：www.google.com 和gmail.google.com就是两个不同的主机名。默认情况下，一个主机中创建的cookie在另一个主机下是不能被访问的，但可以通过domain参数来实现对其的控制，其语法格式为：
document.cookie="name=value; domain=cookieDomain";
以google为例，要实现跨主机访问，可以写为：
document.cookie="name=value;domain=.google.com";
这样，所有google.com下的主机都可以访问该cookie。

综合示例：构造通用的cookie处理函数
cookie的处理过程比较复杂，并具有一定的相似性。因此可以定义几个函数来完成cookie的通用操作，从而实现代码的复用。下面列出了常用的cookie操作及其函数实现。
1．添加一个cookie：addcookie(name,value,expireHours)
该函数接收3个参数：cookie名称，cookie值，以及在多少小时后过期。这里约定expireHours为0时不设定过期时间，即当浏览器关闭时cookie自动消失。该函数实现如下：
<script language="JavaScript" type="text/JavaScript">
<!--
function addcookie(name,value,expireHours){
      var cookieString=name+"="+escape(value);
      //判断是否设置过期时间
      if(expireHours>0){
             var date=new Date();
             date.setTime(date.getTime+expireHours*3600*1000);
             cookieString=cookieString+"; expire="+date.toGMTString();
      }
      document.cookie=cookieString;
}
//-->
</script>
2．获取指定名称的cookie值：getcookie(name)
该函数返回名称为name的cookie值，如果不存在则返回空，其实现如下：
<script language="JavaScript" type="text/JavaScript">
<!--
function getcookie(name){
      var strcookie=document.cookie;
      var arrcookie=strcookie.split("; ");
      for(var i=0;i<arrcookie.length;i++){
            var arr=arrcookie[i].split("=");
            if(arr[0]==name)return arr[1];
      }
      return "";
}
//-->
</script>
3．删除指定名称的cookie：deletecookie(name)
该函数可以删除指定名称的cookie，其实现如下：
<script language="JavaScript" type="text/JavaScript">
<!--
function deletecookie(name){
       var date=new Date();
       date.setTime(date.getTime()-10000);
       document.cookie=name+"=v; expire="+date.toGMTString();
}
//-->
</script>

也可以用另一种网上流传的:

<script language="JavaScript" type="text/JavaScript">

//写cookies函数 作者：翟振凯
function SetCookie(name,value)//两个参数，一个是cookie的名子，一个是值
{
    var Days = 30; //此 cookie 将被保存 30 天
    var exp =;expires=" + exp.toGMTString();
}
function getCookie(name)//取cookies函数       
{
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
     if(arr !=;expires="+exp.toGMTString();
}

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

---

[JS]Cookie精通之路

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

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

在这篇文章里，我们要学习：

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

什么是Cookies?

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

比如，如果你运行的是Windows操作系统，使用Internet Explorer上网，那么你会发现在你的“Windows”目录下面有一个子目录，叫做“Temporary Internet Files”。如果你有空看看这个目录，就会发现里面有一些文件，文件名称看起来就象电子邮件地址。比如在我机器上的这个目录里，就有 “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除了; path=" + "/" + "; _
domain=" + "mydomain.com" + "; secure";

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

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

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

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

// 我们定义一个函数，用来读取特定的cookie值。
function getCookie(cookie_name)
｛
var allcookies = document.cookie;
var cookie_pos = allcookies.indexOf(cookie_name);

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

if (cookie_end == -1)
｛
cookie_end = allcookies.length;
｝

var value = unescape(allcookies.substring(cookie_pos, cookie_end));
｝

return value;
｝

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

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

比如，在David Flangan的Javascript: The Definitive Guide 3rd Ed.这本书里，可以找到很好的cookie应用类。你也可以在Oreilly的WEB站点上找到这本书里的例子。本文最后的链接列表里，有一些访问这些 cookie示例的直接链接。



Cookies 怪兽

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

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

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

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

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

外部链接
每个 Javascript 程序员都应当有一份Javascript： David Flanagan 的The Definitive Guide。 这本书里找到cookie 类例程可以帮助你把不止一个变量编码到单一的cookie，克服掉“每个WEB服务器20 个cookies的限制”。请点击这个链接下载该例程，ftp.oreilly.com/pub/examples/nutshell /javascript/

上一篇： [JS]Cookie精通之路 下一篇：select 中的DISTINCT用法[转]