Cookie个数压缩存存储实践

提到cookie，大家都不会陌生的，几乎涉及到交互或统计的WEB系统都会使用到cookie，关于cookie的基础知识网上也有很多，这里推荐两篇文章：

　　聂微东的： http://www.cnblogs.com/Darren_code/archive/2011/11/24/Cookie.html#2933759

　　张子秋的：http://www.cnblogs.com/zhangziqiu/archive/2009/08/06/cookies-javascript-aspnet.html

cookie，很实用，但是在各大浏览器里面限制比较多，下面是各浏览器对cookie大小和个数的限制：

	IE6.0	IE7.0/IE8.0	Opera	FF	Safari	Chrome
cookie个数	每个域为20个	每个域为50个	每个域为30个	每个域为50个	没有个数限制	每个域为53个
cookie大小	4095个字节	4095个字节	4096个字节	4097个字节	4097个字节	4097个字节

看到这张表，突然感到好忧伤，因为我们的项目还要一直兼容IE6，IE在Cookie方面只能保留20个，较旧的会被清掉。 表中Opera是30个，但是新版的Opera已经开始使用webkit内核了，应该也是50个以上的了。

今天我们来讨论的就是解决cookie个数太多的问题，我的做法就是将多个cookie压缩在一个cookie里面 ，里面涉及到很多问题，如域、路径、有效期等，下来直接看一下源码先：

 /**
 * cookie操作模块
 * @name cookiex
 * @function
 * @param {String} key
 * @param {String} [value]
 * @param {{expires:Number|'forever', domain:String, path:String , inCommon: boolean , secure : boolean}} [options]
 * @reutrns {String}
 * @example
 * cookiex(key); //读取cookie
 * cookiex(key, null); //删除cookie
 * cookiex(key, value, {"expires":forever,"domain":"mydomain.com","path":"/" , inCommon : false }); //设置cookie
 */
 function cookiex(key,value,options){

         var options = options || {},
             ret,
             result,
             getRet = function(tkey){
                 var tret = '';
                 if(result = new RegExp('(?:^|; )' + encodeURIComponent(tkey) + '=([^;]*)').exec(document.cookie)) {
                     try {
                         tret = decodeURIComponent(result[1]);
                     } catch(e) {
                         tret = result[1];
                     }
                 }
                 return tret;
             };

         // key and value given, set cookie...
         if (arguments.length > 1 && (value === null || typeof value !== "object")) {

             if (value === null) {

                 //删除forever里面的东西,只改key和expires，在最后才写cookie
                 var forever = getRet("my_common_forever"),
                     inCommon = false,
                     oldKey = key,
                     oldDomain = options.domain ,
                     oldPath = options.path;

                 if(forever != ''){
                     var foreverList =  forever.split('&');
                     for(var i = 0; i < foreverList.length; i++){
                         if(foreverList[i].split('=')[0] == key){
                             foreverList.splice(i,1);
                             key =  "my_common_forever";
                             value = foreverList.join("&");
                             options.expires = new Date(0xfffffffffff);
                             options.domain = "mydomain.com";
                             options.path = "/";
                             inCommon = true;
                             break;
                         }
                     }
                 }

                 //删除session里面的东西,只改key和expires，在最后才写cookie
                 if(!inCommon){
                     var session = getRet("my_common_session");
                     if(session != ''){
                         var sessionList =  session.split('&');
                         for(var i = 0; i < sessionList.length; i++){
                             if(sessionList[i].split('=')[0] == key){
                                 sessionList.splice(i,1);
                                 key =  "my_common_session";
                                 value = sessionList.join("&");
                                 options.expires = null;
                                 options.domain = "mydomain.com";
                                 options.path = "/";
                                 inCommon = true;
                                 break;
                             }
                         }
                     }
                 }

                 //如果不在公用cookie里面就直接在最后删除原生cookie就行了，如果在公用cookie里面就改变
                 if(!inCommon){
                     value = '';
                     options.expires = new Date(0);
                 }else{
                     //删除原生cookie,带直接写cookie操作
                     document.cookie = [
                         encodeURIComponent(oldKey),
                         '=',
                         "" ,
                         '; expires=' + (new Date(0)).toGMTString(),
                         oldPath ? '; path=' + oldPath : '; path=/',
                         oldDomain ? '; domain=' + oldDomain : '; domain=mydomain.com',
                         options.secure ? '; secure' : ''
                     ].join('');
                 }
             }else{
                 //写cookie
                 if (typeof options.expires === 'number') {
                     //计时cookie，默认以秒计
                     var minutes = options.expires,
                         t = options.expires = new Date();
                     t.setDate(t.getSeconds() + minutes);
                 } else if(typeof options.expires === 'string' && options.expires != 'forever') {
                     //计时cookie ,根据开发者输入的尾缀定单位
                     var t = parseInt(options.expires),
                         suffix = options.expires[options.expires.length -1],
                         now = new Date();;
                     if(suffix=="s"){
                         now.setSeconds(now.getSeconds() + t);
                         options.expires = now;
                     } else if(suffix=="m") {
                         now.setMinutes(now.getMinutes() + t);
                         options.expires = now;
                     } else if(suffix=="h") {
                         now.setHours(now.getHours() + t);
                         options.expires = now;
                     } else if(suffix=="d") {
                         now.setDate(now.getDate() + t)
                         options.expires = now;
                     } else if(suffix=="M") {
                         now.setMonth(now.getMonth() + t);
                         options.expires = now;
                     }
                 } else if(options.expires == 'forever') {
                     //永久cookie
                     options.expires = new Date(0xfffffffffff);
                     if(options.inCommon){
                         //如果使用公用cookie，强制使用domain : .mydomain.com这个和 path : /
                         options.domain = "mydomain.com";
                         options.path = "/";
                         var forever = cookiex("my_common_forever");
                         if(forever!=''){

                             var retList =  forever.split('&'),
                                 inForever = false;

                             for(var i = 0; i < retList.length; i++){
                                 if(retList[i].split('=')[0] == key){
                                     retList[i] = key + '=' + encodeURIComponent(String(value));
                                     inForever = true;
                                     break;
                                 }
                             }

                             if(!inForever){
                                 value = forever + "&" + key + '=' + encodeURIComponent(String(value));
                             }else{
                                 value = retList.join('&');
                             }

                         }else{
                             value = key + '=' + encodeURIComponent(String(value));
                         }
                         key = "my_common_forever";
                     }
                 } else if( typeof options.expires === "object" && (a instanceof Date)){
                     //用户自己传入Date对象
                 } else {
                     //浏览器进程cookie
                     options.expires = null;
                     if(options.inCommon){
                         //如果使用公用cookie，强制使用domain : .mydomain.com这个和 path : /
                         options.domain = "mydomain.com";
                         options.path = "/";
                         var session = cookiex("my_common_session");
                         if(session!=''){

                             var retList =  session.split('&'),
                                 inSession = false;

                             for(var i = 0; i < retList.length; i++){
                                 if(retList[i].split('=')[0] == key){
                                     retList[i] = key + '=' + encodeURIComponent(String(value));
                                     inSession = true;
                                     break;
                                 }
                             }

                             if(!inSession){
                                 value = session + "&" + key + '=' + encodeURIComponent(String(value));
                             }else{
                                 value = retList.join('&');
                             }
                         }else{
                             value = key + '=' + encodeURIComponent(String(value));
                         }
                         key = "my_common_session";
                     }
                 }

             }

             //执行操作
             return (document.cookie = [
                 encodeURIComponent(key), '=',
                 options.raw ? String(value) : encodeURIComponent(String(value)),
                 options.expires ? '; expires=' + options.expires.toGMTString() : '', // use expires attribute, max-age is not supported by IE
                 options.path ? '; path=' + options.path : '; path=/',
                 options.domain ? '; domain=' + options.domain : '; domain=mydomain.com',
                 options.secure ? '; secure' : ''
             ].join(''));
         }

         // key and possibly options given, get cookie...
         options = value || {};
         ret = getRet(key);    

         //查找永久公用cookie
         if(ret == '' && key != 'my_common_forever') {
             ret = getRet("my_common_forever");
             if(ret != ''){
                 var retList =  ret.split('&');
                 for(var i = 0; i < retList.length; i++){
                     if(retList[i].split('=')[0] == key){
                         ret = decodeURIComponent(retList[i].split('=')[1]);
                         return ret ;
                     }
                 }
             }
             ret = '';
         }

         //查找浏览器进程公用cookie
         if(ret == '' && key != 'my_common_session') {
             ret = getRet("my_common_session");
             if(ret != ''){
                 var retList =  ret.split('&');
                 for(var i = 0; i < retList.length; i++){
                     if(retList[i].split('=')[0] == key){
                         ret = decodeURIComponent(retList[i].split('=')[1]);
                         return ret ;
                     }
                 }
             }
             ret = '';
         }

         return ret;
 }

一看，操作个cookie两百多行代码，有点小多，这里我来一个个解释一下，为什么会有这么多代码。

公用cookie ：

这里我使用了两个公用的cookie，my_common_session（跟随浏览器进程）和my_common_forever（永久cookie），里面的多个cookie使用 & 符号连接起来，然后用 encodeURIComponent 进行编码。

我把公用cookie的域写死在一个域和路径里面了，这样可以保证读写公用cookie的时候不会因为输入的域不同导致调用不到，一般都是网站的顶级域名，可以按照自己的需求修改。

cookie添加或修改：

在cookie添加或修改的时候判断inCommon 是否为true，如果是的话，就往对应的公用cookie里面添加，否则便以传统的方式添加或修改cookie。

在添加进公用cookie的时候，需要注意的是公用cookie里面是不是已经存在有了，如果不存在就进行添加，如果之前有过的了，便进行值替换，具体是在代码的第 126～192行间。

添加非公用cookie时跟普通的cookie操作差不多，这里也提供了很多关于时间的参数。

/* 调用案例 */
cookiex("a","value-of-cookie-a");
cookiex("a"); //"abcc"

cookiex("b","value-of-cookie-b",{inCommon:true});
cookiex("b"); // "bbbb"

cookiex("c","value-of-cookie-c",{expires:"forever",inCommon:true});
cookiex("c"); //"value-of-cookie-c"

cookiex("d","value-of-cookie-d",{expires:"3h"});
cookiex("d"); //"value-of-cookie-d"

cookie删除：

关于cookie删除操作，这里有两步操作，一步是判断公用cookie里面有没有对应的key，有的话便删除，第二步是删除非公用cookie里面对应的cookie。

/* 调用案例 */

cookiex("d",null) 

可能存在问题及解决：

一个项目里面有不同人对cookie进行操作的时候，可能会同一个key的cookie即存在公用的cookie里面，又存在非公用的cookie里面。在上面的方法里是优先读取了非公用的cookie的，但是这样重复存在难免会造成一些混淆，所以解决方案是团队内部沟通好，约定好一些cookie怎么用。

与服务端结合：

cookie被这样压缩后，服务端就不能直接通过传统的方式去读取这些cookie了，所以我们可以在后台使有类似的方式封装一个方法对cookie进行相应的读写操作。