cookie数据会自动在web浏览器和Web服务器之间传输,因此服务端脚本就可以读、写存储在客户端的cookie值。操作cookie的API很早就已经定义和实现,因此该API兼容性很好。便,该API几乎形同虚设。根本没有提供诸如查询、设置、删除cookied的方法,所有这些操作都要通过以特殊格式的字符串形式读写Document对象的cookie属性来完成。每个cookie的有效期和作用域都可以通过cookie属性来分别指定。这些属性也是通过在同一个cookie属性上以特殊格式的字符串来设定的
javascript代码中使用cookie前,首先要确保cookie是启用的。在绝大多数浏览器中,可以通过检测navigator.cookieEnable这个属性来实现。若该值为true,则当前cookie是启用,否则为禁用。但这个属性不是标准属性。因此在不支持该属性的浏览器上,必须通过使用下面介绍的技术尝试读写删除来测试是否支持cookie。
cookie默认的有效期很短暂;它只能持续在web浏览器的会话期间,一旦用户关闭浏览器,cookie保存的数据就会丢失了。要注意的是:这与sessionStorage的有效期还是有区别的:cookie的作用域并不是局限在浏览器的单个窗口中,它的有效期,可以通过设置max-age属性,但是必须要明确告诉浏览器cookie的有效期是多少(单位秒)一旦设置了有效期,浏览器就会将cookie数据存储在一个文件中,并且直到过了指定的有效期才会删除该文件。
cookie的作用域是通过文档源和文档路径来确定的。该作用域通过cookie的path和domain属性也是可配置的。默认情况下,cookie和创建它的web页面有关,并对该web页面以及和该web页面同目录或者子目录的其他web页面可见。默认的cookier的可见行为满足了最觉的需求。不过,有时候,你可能希望记整个网站都能够使用cookie的值,而不管是哪个页面创建的。比方说,当用户在一个页面表单中输入了他的邮件地址,你想将它保存下来,为了下次该用户回到这个页面填写表单,或者在网站其他页面的任何地方要求输入帐单地址的时候,将其作为默认的邮件地址。要满足这样的需要,可以设置cookie的路径。(设置cookie的path属性)这样一来,来自同一个web服务器的web页面,只要其url是以指定的路径前缀开始的,都可以共享cookie。如cookie的path调协为”/”,那么该cookie对任何该网站的页面都是可见的。将路径设置成”/”就等于是让cookie和localStorage拥有同样的作用域同时当它请求该站点上任何一个web页面的时候,浏览器都必须将cookie的名字和值传递给服务器。但是,要注意的是,cookie的path属性不能被用做访问控制机制。如果一个web页面想要读取同一站点其他页面的cookie,只要简单地将其他页面以隐藏
如果一个大型网站的子域想要访问主域上的cookie。这时通过设置cookie的domain属性来达到目的。如果catalog.example.com域下的一个页面创建了一个cookie,并将其path属性设置成”/”,其domain属性设置成”.example.com”,那么该cookie就对所有catalog.example.com ,orders.example.com以及任何其它example.com域下的任何其它服务器都可见。
cookie的属性是secure,它是一个布尔类型的属性,用来表明cookie的值以何种形式通过网络传递。默认是以不安全形式,而一旦cookie被标识”安全的”,那就只能当浏览器和服务器通过https或者其他的安全协议连接的时候才能传递它。
要给当前文档设置有效期的cookie值,非常简单,只须将cookie属性设置为一个字符串形式的值:name=value
如:document.cookie = “version=”+encodeURIComponent(document.lastModified);
因为cookie名值中的值是不允许包含分号、逗号、和空白 所有使用encodeURIComponent。当要get它的值时要使用decodeURIComponent();
设置cookie的有效期,按如下字符串设置cookie属性即可:
name =value; max-age = seconds
设置cookie值,同时提供一个可选的max-age
function setcookie(name,value,daysToLive){
var cookie = name+”=”+ encodeURIComponent(value);
if(typeof daysToLive===”number”)cookie+=”;max-age=”+(daysToLive*60*60*24);
document.cookie = cookie;
}
同样地,如果要设置cookie的path、domain和secure属性,只须在存储cookie值前,追加如下字符串到cookie值后面
;path = path
;domain = domain
;secure
改变cookie的传值,需要使用相同的名字、路径和域,但是新的重新设置cookie的值。同样地,设置新max-age属性就可以改变原来的cookie的有效期
删除一个cookie,需要使用相同的名字、路径和域,然后指定一个任意(非空)的值,并且将max-age属性指定为0,再次设置cookie
js表达式来读取cookie属性的时候,其返回的值是一个字符串,该字符串都是由一系列名值对组成,不同的名值对之间通过”分号和空格”分开,其内容包含了所有作用在当前文档的cookie。但是,它并不包含其他设置的cookie属性。通过document.cookie属性可以获取cookie值。但是为了更好地查看cookie的值,一般会采用split()方法将cookie值中的名/值对都分离出来。
解析document.cookie属性值
//假设存储cookie的值的时候是采用encodeURIComponent()函数编码的
function getcookie(){
var cookie = {};
var all = document.cookie;
if(all===””)return cookie;
var list = all.split(“; ”);
for(var i=0;i
var kuki = list[i];
var p = kuki.indexOf(“=”);
var name = kuki.substring(0,p);
var value = kuki.substring(p+1);
value = decoedURIComponent(value);
cookie[name] = value;
}
return cookie;
}
cookie的设计初衷是给服务端脚本用来存储少量的数据的,该数据会在每次请求一个相关的URL时传递到服务器中。RFC2965鼓励浏览器供应商对cookie的数据大小不做限制。可骒,该标准不允许浏览器保存超过300个cookie,为每个web服务器保存的cookie数不能超过20个,而且,每个cookie保存的数据不能超过4k。实际上,现代浏览器允许cookie总数超过300个,但是部分浏览器对单个cookie大小仍然有4k的限制。
例:定义一个cookieStorage函数,通过将max-age和path属性传递给该构造函数,通过将max-age和path属性传递给该构造函数,就会返回一个对象,然后就可以像使用localStorage属性或sessionStorage一样来使用这个对象。但是要注意的是,该例并没有实现存储事件,因此,当设置和查询cookieStorage对象的属性的时候,不会实现自动保存和获取对应的值。
例:实现基于cookie的存储API
function cookieStorage(maxage,path){
var cookie = (function(){
var cookie = {};
var all = document.cookie;
if(all===””)return cookie;
var list = all.split(“; ”);
for(var i=0;i
var kuki = list[i];
var p = kuki.indexOf(“=”);
var name = kuki.substring(0,p);
var value = kuki.substring(p+1);
value = decoedURIComponent(value);
cookie[name] = value;
}
return cookie;
}());
var keys = [];
for(var key in cookie) keys.push(key);
this.length= keys.length;
this.key= function(n){
if(n<0 || n>=keys.length)return null;
return keys[n];
}
this.getItem= function(name){
return cookie[name] || null;
}
this.setItem= function(key,value){
if(!(key in cookie)){ //如果要存储的cookie还不存在
keys.push(key);
this.length++;
}
cookie[key] = key+”=”+encodeURIComponent(value);
//将cookie的属性也加入到该字符串中
if(maxage)cookie+=”;max-age=”+maxage;
if(path)cookie+=”;path=”+path;
document.cookie = cookie;
} //end setItem
//删除指定的cookie
this.removeItem = function(key){
if(!(key in cookie)) return;
delete cookie[key];
//删除keys
for(vari=0;i
if(keys[i]===key)keys.splice(i,1);
break;
}
this.length--;
//最终通过将该cookie值设置为字符串以及将有效期设置0来删除指定cookie
document.cookie=key+”=;max-age=0”;
}//end removeItem
//删除所有的cookie
this.clear = function(){
for(vari=0;i
document.cookie = keys[i]+”=;max-ago=0”;
cookie = {};
keys = [];
this.length = 0;
}
}