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进行相应的读写操作。