cookie 是用来存储浏览者访问网页的一些操作或者某些变量的一种浏览器机制,一般是用来存储网站的用户名和密码等。如百度的记住登陆状态:

cookie–记住用户名

cookie是document下的一个属性。它主要存在于浏览器客户端的文件夹里,所以懂相关技术的人员可以手动修改cookie,这也说明了cookie的不安全性。

当我们在网站首页登录一个网站时,我们同样可以浏览这个网站的其他页面和版块而不需再次输入用户名和密码,所以一个网站的所有页面是共享一套cookie。

关于cookie的大小,因为不同浏览器也相应不同。例如,ie6所能存储的cookie数是20个,大小为4095个字节。ie7和ie8是50个,大小为4095个字节。Opera是30个,大小为4096个字节。ff是50个,大小为4097个字节等。并且当浏览器的cookie数量达到最大存储数时,它们的处理方式也不同,一些浏览器是自动剔除最老的cookie,而有些是随机删除已有的cookie。

cookie只能运行在服务器环境下,如果你非要在本地测试cookie,你可以在本地架一个服务器环境。当然你也可以用火狐浏览器,其效果与其他浏览器在服务器环境下的效果相同。

最后需要提下,cookie与网页缓存无任何关系,cookie是完全通过javascript控制的。我们将cookie的特性总结下。

cookie的特性

  1. 同一网站所有页面公用一套cookie。

  2. 数量和体积是有限的,不超过50个。

  3. 有过期时间,可以通过JS设置。如果不设置则默认关闭浏览器cookie自动删除。

  4. cookie以一个文件的形式存在客户端的机器上,用户可更改,安全性较低。

  5. cookie只能运行在服务器环境下,如果在本地测试的话你需要自己搭建服务器,或者你也可用firefox浏览器进行测试。

  6. cookie无兼容性问题。

cookie的操作

cookie的操作主要分为cookie的设置,cookie的读取,以及cookie的删除三部分。

设置cookie

cookie的设置也是cookie的存储过程,cookie的格式一般为:

document.cookie=name=value;expires=time;

另外设置过期时间,是通过日期对象的setDate方法,于是就有:

function setCookie(name,value,iDay){
  var oDate=new Date();
  oDate.setDate(oDate.getDate()+iDay);
  document.cookie=name+"="+value+";expires="+oDate;
}

读取cookie

那么如何检测cookie是否已经保存成功,我们可以通过重启浏览器打开网站看是否用户名等信息是否已经记录,或者再次刷新页面看之前执行的动作是否保存。当然在这之前我们必须读取已经保存的cookie,但是因为浏览器可能存在多条cookie,所以我们读取cookie必须进行document.cookie的name判断,但鉴于document.cookie=name+”=”+value+”;expires=”+oDate;是这种格式,那么便要对其进行拆分判断,直到得到我们需要的,于是就有:

function readCookie(name){
  var arr1=document.cookie.split("; ");
  for(var i=0,len=arr1.length;i<len;i++){
    var arr2=arr1[i].split("=");
      if(arr2[0]==name){
        return arr2[1];
      }
  }
  return;
}

删除cookie

所谓的删除cookie,也就是过期时间设置为过去的某个时刻,我们这里将过期时间设为-1,value的值可取任何值:

function removeCookie(name){
  setCookie(name,"-1",-1);
}