cookie是存储于访问者计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个cookie。你可以使用JavaScript来创建和取回cookie的值。
获取Cookie
document.cookie//读取所有可从此位置访问的Cookie
在上图中,可以看出返回值为一个字符串,该字符串包含所有的Cookie,每条cookie以分号分隔(即, key=value 键值对)。
设置Cookie
document.cookie = <cookie-list>;
<cookie-list>
一个或多个的名称/值对,形式为 <cookie-name>=<cookie-value>。名称/值对之间用分号和空格 ('; ')隔开。
document.cookie = name=value;
document.cookie = name=value; name2=value2; name3=value3
以下可选的cookie属性值可以跟在键值对后,用来具体化对cookie的设定或更新,使用分号以作分隔:
;path=path (例如 '/', '/mydir') 如果没有定义,默认为当前文档位置的路径。
;domain=domain (例如 'example.com', '.example.com' (包括所有子域名), 'subdomain.example.com') 如果没有定义,默认为当前文档位置的路径的域名部分。
;max-age=max-age-in-seconds (例如一年为60*60*24*365)
;expires=date-in-GMTString-format 如果没有定义,cookie会在对话结束时过期
这个值的格式参见Date.toUTCString()
;secure (cookie只通过https协议传输)
注意
当cookie中包含有等号、空格、分号等特殊字符时,可能会导致数据丢失、或者不能解析的错误,一个较好的解决办法就是:在将cookie值写入客户端浏览器之前,首先进行encodeURIComponent()编码,读取cookie时,进行decodeURIComponent()解码即可。
可以通过更新一个cookie的过期时间为0来删除一个cookie。
更多/更大的cookies意味着每个请求都要包含更繁重的数据传输影响响应速度.如果您只是需要存储些客户端的数据, 那么建议您使用本地存储之Window.localStorage。
简单的cookie代码
var SiteCookie = {
_expires:30*24*3600*1000,//过期时间
_domain:location.host,//例如 'example.com', '.example.com' (包括所有子域名)
set:function(name,value,expires,path,domain){
expires = new Date( new Date().getTime() + ( expires||this._expires ) );
document.cookie = name + "=" + encodeURIComponent(value) +"; expires="+ expires.toGMTString() +"; path="+(path||"/")+"; domain="+(domain||this._domain);
},
get:function(name){
var arr = document.cookie.match( new RegExp("(^| )"+ name +"=([^;]*)(;|$)") );
if(arr != null) return decodeURIComponent( arr[2] );
return null;
},
clear:function(name,path,domain){
if( this.get(name) ) document.cookie = name +"=; path="+ (path||"/") +"; domain="+ (domain||this._domain) +"; expires=0";
}
};
存储简单值
SiteCookie.set('tabState',1);//设置Cookie
SiteCookie.get('tabState');//获取Cookie值为1
SiteCookie.clear('tabState');//删除Cookie
存储数组对象
Cookie只能存储字符串的数据,但我们可以通过JSON对象提供的stringify将其他数据类型转化成字符串,再存储到Cookie中。取出时再通过JSON对象提供的parse方法解析JSON字符串,返回由字符串描述的JavaScript值或对象
var ary = [{age:30,name:'jin'},{age:27,name:'ren'}];
SiteCookie.set('user', JSON.stringify(ary) );//"[{"age":30,"name":"jin"},{"age":27,"name":"ren"}]"
console.log( JSON.parse( SiteCookie.get('user') ) );//[{age:30,name:'jin'},{age:27,name:'ren'}]