本文总结的是cookie的常见操作以及封装操作的方法,cookie原理,作用,和session的关系等等不予讨论,可以查看其它文章。
cookie由以下几块组成:①名称:必需值;②值:必需值;③域domain:可选,如不填写,默认为设置cookie的域名;④路径path:可选,如不填写,默认为设置cookie的路径;⑤失效时间expires:可选,默认会话结束将cookie删除;⑥安全标志secure:可选,如果指定,则只能是SSL连接的时候才发送到服务器。
cookie的限制:IE6 以及更低版本限制每个域名最多 20 个 cookie,IE7 和之后版本最多 50 个,Firefox 限制每个域最多 50 个 cookie, Opera 限制每个域最多 30 个 cookie,Safari 和 Chrome 对于每个域的 cookie 数量限制没有硬性规定,当超过单个域名限制之后还要再设置 cookie,浏览器就会清除以前设置的 cookie。而浏览器中对于 cookie 的尺寸限制是4096B(写的时候肯定要比这个容量低)。
window.navigator.cookieEnabled:表示浏览器是否打开 Cookie 功能。
HttpOnly属性:如果服务器加上了HttpOnly属性,则这个Cookie无法被JavaScript读取(即document.cookie不会返回这个Cookie的值),只用于向服务器发送。
原始的Cookie操作
document.cookie = "myCookie=myValue";
document.cookie = "cookie1=value1";
//返回当前页面可用的cookie由分号隔开的key和value名值对:name1=value1;name2=value2;name3=value3
console.log(document.cookie);
//而且需要对名称和值进行编码(因为名称和值中不允许出现分号,逗号和空格)
document.cookie = encodeURIComponent("name") + "=" + encodeURIComponent("jay") + ";domain=baidu.com;path=/";
//一般设置cookie都是重新设置一个cookie,除非设置的时候,cookie名称,domain,path,secure这几个都一致,
//如果想删除cookie就是这种做法.
封装Cookie常用操作
//封装常用cookie操作
var CookieUtil = {
get:function (name) {
var cookieName = encodeURIComponent(name) + '=',cookieValue = null,
cookieStart = document.cookie.indexOf(cookieName);
if(cookieStart > -1){
var cookieEnd = document.cookie.indexOf(';',cookieStart);
if(cookieEnd == -1){
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd));
}
return cookieValue;
},
set:function (name, value,expires, path, domain,secure) {
var cookieText = encodeURIComponent(name) + "=" +
encodeURIComponent(value);
if (expires instanceof Date) {
cookieText += "; expires=" + expires.toGMTString();
}
if (path) {
cookieText += "; path=" + path;
}
if (domain) {
cookieText += "; domain=" + domain;
}
if (secure) {
cookieText += "; secure";
}
document.cookie = cookieText;
},
unset: function (name, path, domain, secure){
this.set(name, "", new Date(0), path, domain, secure);
}
};
封装子Cookie操作
为了绕开浏览器对域名下的cookie数量的限制,可以使用子cookie的方式,同时要注意的是不能超过单个cookie的长度限制。
//封装的关于子cookie的方法:
var SubCookieUtil = {
get:function (name, subName) {
var subCookies = this.getAll(name);
if(subCookies){
return subCookies[subName];
}else{
return null;
}
},
getAll:function (name) {
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null,
cookieEnd,
subCookies,
i,
parts,
result = {};
if(cookieStart > -1){
cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd == -1){
cookieEnd = document.cookie.length;
}
cookieValue = document.cookie.substring(cookieStart + cookieName.length, cookieEnd);
if(cookieValue.length > 0){
subCookies = cookieValue.split("&");
for (i=0, len=subCookies.length; i < len; i++){
parts = subCookies[i].split("=");
result[decodeURIComponent(parts[0])] =
decodeURIComponent(parts[1]);
}
return result;
}
}
return null;
},
set: function (name, subName, value, expires, path, domain, secure) {
var subcookies = this.getAll(name) || {};
subcookies[subName] = value;
},
setAll: function(name, subcookies, expires, path, domain, secure) {
var cookieText = encodeURIComponent(name) + "=",
subcookieParts = new Array(),
subName;
for (subName in subcookies){
if(subName.length > 0 && subcookies.hasOwnProperty(subName)){
subcookieParts.push(encodeURIComponent(subName) + "=" +
encodeURIComponent(subcookies[subName]));
}
}
if (subcookieParts.length > 0){
cookieText += subcookieParts.join("&");
if (expires instanceof Date) {
cookieText += "; expires=" + expires.toGMTString();
}
if (path) {
cookieText += "; path=" + path;
}
if (domain) {
cookieText += "; domain=" + domain;
}
if (secure) {
cookieText += "; secure";
}
}else{
cookieText += "; expires=" + (new Date(0)).toGMTString();
}
document.cookie = cookieText;
},
unset: function (name, subName, path, domain, secure){
var subcookies = this.getAll(name);
if (subcookies){
delete subcookies[subName];
this.setAll(name, subcookies, null, path, domain, secure);
}
},
unsetAll: function(name, path, domain, secure){
this.setAll(name, null, new Date(0), path, domain, secure);
}
};