解决javascript cookie 不同页面共享的问题
今天正好项目里要用cookie在不同页面共享一些数据，免去用get，post请求的问题，没想到居然遇到了很诡异的问题，两个页面的cookie竟然不能不能相互调用，很多设置在IE下有效，在Firefox、GoogleChrome 下无效，郁闷之余重新认识一下COOKIE：
cookie是由某一个网页所创建，在创建cookie的网页对cookie的操作是没有问题的。但在同一网站的多个页面，甚至是不同子目录下的页面，访问网站公共cookie时，需要设置相同的path才可以。语法如下：
document.cookie=”name=value; path=cookieDir”;
如果要使cookie在整个网站下可用，可以将cookieDir指定为根目录即 ‘/’，示例如下：
document.cookie=”user=Tom; path=/”;
但是path不能解决在不同域中访问cookie的问题。在默认情况下，只有和设置cookie的网页在同一个Web服务器的网页才能访问该网页创建的cookie。但可以通过domain参数来实现对其的控制，其语法格式如下：
document.cookie=”name=value; domain=cookieDomain”;通过域名限制，可以使子域名访问主域名下的cookie。例如:
document.cookie=”user=Jerry;domain=a.com,path=/”,则网页sub.a.com的网页也可以访问它。
设置网站各个目录页面都可以访问的cookie带来方便的同时，也有一些难以避免的问题就是，此后该网页的每个http请求，都会带上全站长长的cookie，直接导致服务器接收客户端request的header长度增长，流量增长的同时服务器负担也变重。而且根据 RFC 2109 的定义Cookie也有长度和个数限制，IE允许的最大 Cookie 长度是 4096 字节，允许50个 Cookie 名-值对。如果要突破50个名-值对的限制，可以在一个名-值使用Cookie字典的方式保存更多的Cookie变量。
下面是一个用函数封装的js cookie操作：
function setCookie(name, value, expires, path, domain, secure){
document.cookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
var exp = new Date();
exp.setTime(exp.getTime() – 1);
var cval = getCookie(name);
document.cookie = name + “=” + cval + “; expires=” + exp.toGMTString();
}
var cookies = document.cookie.split(‘;’);
var cookie = ”;
for (var i = 0; i < cookies.length; i++) {
cookie = cookies[i].split(‘=’);
if (cookie[0].replace(/^s+|s+$/g, ”) == name) {
return (cookie.length <= 1) ? “” : unescape(cookie[1].replace(/^s+|s+$/g, ”));
}
}
return null;
}
var expDate = new Date();
if (typeof(days) == “number” && typeof(hours) == “number” && typeof(hours) == “number”) {
expDate.setDate(expDate.getDate() + parseInt(days));
expDate.setHours(expDate.getHours() + parseInt(hours));
expDate.setMinutes(expDate.getMinutes() + parseInt(minutes));
return expDate.toGMTString();
}
return null;
}
有些常用的js类库，如jquery，也提供一下操作cookie的扩展，如：
if (typeof value != ‘undefined’) { // name and value given, set cookie
options = options || {};
if (value === null) {
value = ”;
options = $.extend({}, options); // clone object since it’s unexpected behavior if the expired property were changed
options.expires = -1;
}
var expires = ”;
if (options.expires && (typeof options.expires == ‘number’ || options.expires.toUTCString)) {
var date;
if (typeof options.expires == ‘number’) {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = ‘; expires=’ + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
// NOTE Needed to parenthesize options.path and options.domain
// in the following expressions, otherwise they evaluate to undefined
// in the packed version for some reason…
var path = options.path ? ‘; path=’ + (options.path) : ”;
var domain = options.domain ? ‘; domain=’ + (options.domain) : ”;
var secure = options.secure ? ‘; secure’ : ”;
document.cookie = [name, ‘=’, encodeURIComponent(value), expires, path, domain, secure].join(”);
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != ”) {
var cookies = document.cookie.split(‘;’);
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + ‘=’)) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};
最新评论