javascript cookie和客户端持久性

cookie基础知识

cookie可以使javascript可以在用户的硬盘上持久的存储数据,并且可以获取这种方式存储的数据.可以用Document.cookie属性来脚本化cookie,帮助实现客户端脚本化. 

cookie是一个字符串属性,可以用它对当前网页的cookie进行读,创建,修改,删除等操作.每个cookie都有四个可选属性,分别控制生存期,可见性,安全性.第一个属性:expire或者max-age,设定数据的最终保存时间,超过这个事件,cookie会删除掉保存的数据.第二个属性:path,它指定了与cookie关联在一起的网页.默认情况情况下,只有和设置cookie的网页来自同一个web服务器的页面才可以访问cookie.第三个属性:secure,默认false,如果设置为true,只有浏览器和服务器通过安全协议连接时才被传输.

expire,max-age,path,domain,secure都是cookie的属性.

在检查cookie是否开启方法:navigator.cookieEnabled属性为true,表示开启;false表示关闭.这是一个非标准的方法,但大多数浏览器是可以这样.

cookie的存储

数据在cookie中存储是以name=value的形式.如果数据要设置保存时间,要这样设置name=value;max-age=seconds. cookie的全限定样式是: name=value;max-age=seconds;path=path;domian=domian;secure

cookie的局限

主要用于少量数据存储.浏览器不允许超过300个cookie,每个web服务器不要超过20个,每个cookie保存的数据不能超过4KB.

cookie的读取

cookie数据单元之间是以";"分割的,读取数据的方法主要使用String.indexOf()和String.substring(),有可能还会用到String.split().如果cookie值编码时使用了函数encodeURIComponent(),那么解码数据的时候就要使用decodeURIComponent().

cookie读取示例:

var allcookie=document.cookie;

var pos=allcookie.indexof("version=");

if(pos!=-1){

  var start=pos+8;

  var end=allcookie.indexof(";",start);

  if(end==-1)end=allcookie.length;

  var value=allcookie.substring(start,end);

  value=decodeURIComponent(value);//get value in cookie

  if(value!=document.lastModified)console.log("This document has changed since you were last here!");//on Firefox console,get the tool tip

}

下面是cookie的封装代码,实现了类

function Cookie(name){

   this.$name=name;

   var allcookie=document.cookie;

   if(allcookie=="")return;

   

   var cookies=allcookie.split(";");

   var cookie=null;

   

   if(var i=0;i<cookies.length;i++){

      if(cookies[i].substring(0,name.length+1)==(name+"=")){

    cookie=cookies[i];

break;

  }    

   }

    

if(cookie==null)return;

var cookieval=cookie.substirng(name.length+1);

var a=cookieval.split('&');

for(var i=0;i<a.length;i++){

   a[i]=a[i].split(':');    

}

    for(var i=0;i<a.length;i++){

   this[a[i][0]]=decodeURIComponent(a[i][1]);

}  

}

Cookie.prototype.store=function(daysToLive,path,domain,secure){

  var cookieval="";

  for(var prop in this){

    if((prop.charAt(0)=="$")||((typeof this[prop])=="function"))continue;

if(cookieval!="")cookieval+='&';

cookieval+=prop+':'+encodeURIComponent(this[prop]);

  }

  

  var cookie=this.$name+'='+cookieval;

  if(daysToLive||daysToLive==0){

    cookie+=";max-age="+(daysToLive*24*60*60);

  }

  if(path)cookie+=";path="+path;

  if(domain)cookie+=";domain="+domain;

  if(secure)cookie+=";secure";

  

  document.cookie=cookie;

}

Cookie.prototype.remove=function(path;domian,secure){

   for(var prop in this){

     if((prop.charAt(0)=="$")||((typeof this[prop])=="function"))delete this[prop];

   }

   this.store(0,path,domain,secure);

}

Cookie.enabled=function(){

  if(navigator.cookieEnabled!=undefined)return navigator.cookieEnabled;

  

  if(Cookie.enabled.cache!=undefined)return Cookie.enabled.cache;

  

  document.cookie="testcookie=test;max-age=10000";

  

  var cookies=document.cookie;

  if(cookies.indexof("testcookie=test")!=-1){ return Cookie.enabled.cache=false;}

  else{ document.cookie="testcookie=test;max-age=0"; return Cookie.enabled.cache=true; } 

}

封装类的使用

var cookie=new Cookie("visitordata");

if(!cookie.name||!cookie.color){

  cookie.name=prompt("what is your name:","");

  coolie.color=prompt("What is your favorite color:","");

}

if(!cookie.visits)cookie.visits=1;

else cookie.visits++;

cookie.store(10);

document.write('<h1 style="color:'+cookie.color+'">'+

    'Welcome,'+cookie.name+'!'+'</h1>'+

'<p>You have visited '+cookie.visits+' times.'+

'<button οnclick="window.cookie.remove();">Forget Me</button>');

cookie的替代方案

IE的userData插件和Adobe Flash的插件.(略过)