js中的cookie

cookie是浏览器提供的一种机制，它将document 对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。

不同的浏览器对cookie的实现也不一样，但其性质是相同的。例如在Windows 2000以及Windows xp中，cookie文件存储于documents and settings\userName\cookie\文件夹下。通常的命名格式为：userName@domain.txt。

cookie应用

cookie机制将信息存储于用户硬盘，因此可以作为全局变量，这是它最大的一个优点。它可以用于 以下几种场合。
（1）保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个 月、一年等。

（2）跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了 cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后 台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便。

（3）定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。

（4）创建购物车。正如在前面的例子中使用cookie来记录用户需要购买的商品一样，在结账的时候可以统一提交。例如淘宝网就使用cookie记录了用户曾经浏览过的商品，方便随时进行比较。

cookie的缺点

（1）cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能；
（2）cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的；
（3）cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除；
（4）cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。

 

1.设置cookie

每个cookie都是一个名/值对，可以把下面这样一个字符串赋值给document.cookie：

1 document.cookie="userId=828"; 

多个cookie：

1 document.cookie = "userName=vicky";
2 document.cookie = "userId=123";

在cookie 的名或值中不能使用分号（;）、逗号（,）、等号（=）以及空格。在cookie的名中做到这点很容易，但要保存的值是不确定的。如何来存储这些值呢？方法是用escape()函数进行编码，它能将一些特殊符号使用十六进制表示，例如空格将会编码为“20%”，从而可以存储于cookie值中，而且使用此种方案还可以避免中文乱码的出现。
例如：

1 document.cookie="str="+escape("I love ajax");

相当于：

1 document.cookie="str=I%20love%20ajax";

当使用escape()编码后，在取出值以后需要使用unescape()进行解码才能得到原来的cookie值。

2.获取cookie的值 

（1）直接获取：

cookie的值可以由document.cookie直接获得：

1 var strCookie=document.cookie; // userName=vicky; userId=123

这将获得以分号隔开的多个名/值对所组成的字符串，这些名/值对包括了该域名下的所有cookie。

（2）单个cookie的值

 1 document.cookie = "userName=vicky";
 2     document.cookie = "userId=123";
 3     var strCookie = document.cookie;
 4     var arrCookie = strCookie.split("; ");
 5     for(var i in arrCookie){
 6         var arr = arrCookie[i].split("=");
 7         if("userId" == arr[0]){
 8             document.write(arr[1]);//123
 9             }
10         }

3.给cookie设置终止日期 

到现在为止，所有的cookie都是单会话cookie，即浏览器关闭后这些cookie将会丢失，事实上这些cookie仅仅是存储在内存中，而没有建立相应的硬盘文件。

在实际开发中，cookie常常需要长期保存，例如保存用户登录的状态。这可以用下面的选项来实现：

document.cookie="userId=828; expiress=GMT_String";
其中GMT_String是以GMT格式表示的时间字符串，这条语句就是将userId这个cookie设置为GMT_String表示的过期时间，超过这个时间，cookie将消失，不可访问。例如：如果要将cookie设置为10天后过期，可以这样实现：

1 var date = new Date(); //获取当前时间 
2     var expiresDays = 10; 
3     date.setTime(date.getTime()+expiresDays*24*3600*1000); //将date设置为10天以后的时间 
4     document.cookie = "userName=Elain;";
5     document.cookie = "userId=456;expires="+ date.toGMTString();
6     document.write(document.cookie); //userId=456; userName=Elain

4.删除cookie 

删除一个cookie，可以将其过期时间设定为一个过去的时间，例如： 

1 var date = new Date(); //获取当前时间 
2     date.setTime(date.getTime()-10000); //将date设置为过去的时间
3     document.cookie = "userName=lily; expires="+date.toGMTString(); //将userName这个cookie删除 
4     document.write(document.cookie);

5.封装成函数

(1)添加一个cookie：addCookie(name,value,expiresHours)
该函数接收3个参数：cookie名称，cookie值，以及在多少小时后过期。这里约定expiresHours为0时不设定过期时间，即当浏览器关闭时cookie自动消失。

 1 function addcookie(name, value, expiresHours){
 2         var cookieString = name+"="+escape(value);
 3         //判断是否设置过期时间
 4         if(expiresHours>0){
 5             var date = new Date();
 6             date.setTime(date.getTime()+expiresHours*3600*1000);
 7             cookieString = cookieString+"; expires="+date.toGMTString();
 8             }
 9             document.cookie = cookieString;
10         }

(2)获取指定名称的cookie值：getCookie(name) 

该函数返回名称为name的cookie值，如果不存在则返回空

 1 function getCookie(name){
 2             var cookieString = document.cookie;
 3             var arrCookie = cookieString.split("; ");
 4             for(var i in arrCookie){
 5                 arr = arrCookie[i].split("=");
 6                 if(name==arr[0]){
 7                     return arr[1];
 8                     }
 9                 }
10                 return "";    
11             }

(3)删除指定名称的cookie：deleteCookie(name)

该函数可以删除指定名称的cookie：

1 function deleteCookie(name){
2          var date = new Date();
3          date.setTime(date.getTime()-1000);
4          document.cookie = name+"=v; expires="+date.toGMTString();
5          }

 

转载于:https://www.cnblogs.com/vickyloveweb/archive/2013/03/10/2952679.html