cookie自封装对象

cookie.js(设置名值对属性时候不支持设置成前后有空格的格式，如' key'或'key ',只支持‘key’)

(function initCookieClass(win){// 定义匿名函数并在定以后立即调用(function(){}()),圆括号保证并正确解析成函数

    var Cookie=function Cookie(maxage,path){// Cookie构造函数

        // 私有属性,将document.cookie解析成JSON对象

        var cookie=(function(ck){

            var cookie={};

            var all=ck;

            if(all==='') return cookie; // 返回空值对象

            // document.cookie以key1=value1;key2=value2的格式存储数据

            var list=all.split(';');    

            for (var i = 0; i < list.length; i++) {

                var c=list[i];

                var p=c.indexOf('=');

                var name=c.substring(0,p);

                // cookie存储中第一个名值对没有空格,第二个开始都有空格,做清除空格操作

                if(name && typeof name==='string') name=name.replace(/^\s|\s%/,'');

                var value=c.substring(p+1);

                // 对名值对进行解码,一般只要对值进行编解码,主要是对中文的处理

                name=decodeURIComponent(name);

                value=decodeURIComponent(value);

                cookie[name]=value;

            }

            return cookie;

        }(win.document.cookie));

        // 私有属性,keysSet

        var keys=[];

        for(var key in cookie) keys.push(key);

        // 自有属性,length表示cookie的对象数

        this.length=keys.length;

        // 实例方法,根据索引值返回cookie值,在根据长度遍历时候使用

        this.key=function(n){

            if(n<0||n>keys.length) return null;

            return cookie[n];

        };

        // 实例方法,根据key获取value

        this.getItem=function(name){

            return cookie[name]||null;

        };

        // 实例方法,设置cookie属性,以名值对的格式

        this.setItem=function(key,value){

            if(!key) {

                for(var k in value) {

                    this.setItem(k, value[k]);

                }

                return;

            }

            if(!(key in cookie)) {

                keys.push(key);

                this.length++;

            }

            cookie[key]=value;

            var c=encodeURIComponent(key)+'='+encodeURIComponent(value);

            if(maxage) c+=';max-age='+maxage;

            if(path) c+=';path='+path;

            win.document.cookie=c;

            return this;

        };

        // 实例方法,根据key删除value

        this.removeItem=function(key){

            if(!(key in cookie)) return;

            delete cookie[key];

            for (var i = 0; i < keys.length; i++) {

                if(keys[i]===key) {

                    keys.splice(i,1);

                    break;

                }

            }

            this.length--;

            win.document.cookie=encodeURIComponent(key)+'=;max-age=0';

            return this;

        };

        // 实例方法,清除掉cookie数据和此对象数据

        this.clear=function(){

            for (var i = 0; i < keys.length; i++) {

                win.document.cookie=encodeURIComponent(keys[i])+'=;max-age=0';

            }

            cookie={};

            keys=[];

            this.length=0;

            return this;

        };

        // 实例方法,重新从浏览器中获取cookie数据

        this.sync=function(){

            cookie=(function(){

                var cookie={};

                var all=win.document.cookie;

                if(all==='') return cookie;

                var list=all.split(';');

                for (var i = 0; i < list.length; i++) {

                    var c=list[i];

                    var p=c.indexOf('=');

                    var name=c.substring(0,p);

                    if(name && typeof name==='string') name=name.replace(/^\s|\s%/,'');

                    if(name) name=name.replace(/^\s|\s%/,'');

                    var value=c.substring(p+1);

                    name=decodeURIComponent(name);

                    value=decodeURIComponent(value);

                    cookie[name]=value;

                }

                return cookie;

            }());

            keys=[];

            for(var key in cookie) keys.push(key);

            this.length=keys.length;

            return this;

        };

        // 实例方法,返回cookie的JSON格式

        // 因为cookie是私有属性,在函数体闭包内用val声明的变量,在函数体外是无法直接访问的

        this.getCookieJSON=function(){

            return cookie;

        };

    };

    win.Cookie=Cookie;

    win.cookie=new Cookie();

}(window));

cookie.html,简单测试一下

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Cookie Test</title>

<script type="text/javascript" src="cookie.js"></script>

<script type="text/javascript">

    (function(w){

        w.onload=function(){

            if(cookie) {

                // 增,改

                cookie.setItem('test','success');

                // 查

                var result=cookie.getItem('test');

                console.log('test:'+result);

                // 删

                cookie.removeItem('test');

                // 支持JSON格式的存储方案

                cookie.setItem(null,{'one':1,'two':2});

                // 根据JSON格式查找

                result=cookie.getCookieJSON();

                console.log('cookie for json:');

                for(var i in result) {

                    console.log('\n'+i+':'+result[i]);

                }

            } else {

                throw new Error('Create cookie instance failure.');

            }

        };

    }(window));

</script>

</head>

<body>

    

</body>

</html>

 

默认cookie对象的生命周期是Web浏览器的会话期(session)，与sessionStorage的作用域不同，cookie是整个浏览器进程，而不是单个窗口的进程。不同标签页可以共用，除非显示设置。

几乎所有的浏览器都支持cookie。

 

参考文献：《JavaScript权威指南》  --O‘REILLY[第六版]