基于'sessionStorage'与'userData'的类session存储

Storage.js：

 注意：此版本实现的存储在符合Web存储标准(ie8及ie8以上的版本与其他主流浏览器)的情况下与session的周期一致,但在页面不关闭的情况下没有过期时间,ie7及以下版本则默认是永久保存，但可以通过预留的方法setMaxAge(Number age)来设置有效期，设置0的话在关闭或刷新页面时会清除缓存。

(function initStorageClass(win){

    var inherit=function(o){

        if(o===null || o ===undefined) throw TypeError();

        if(Object.create) return Object.create(o);

        var t = typeof o;

        if(t!=='object'&&t!=='function') throw TypeError();

        function f(){}

        f.prototype=o;

        return new f();

    };

    var extend=function(a,b){

        for ( var key in b) { a[key]=b[key]; }

        return a;

    };

    var defineSubclass=function(superclass,constructor,methods,statics){

        constructor.prototype=inherit(superclass.prototype);

        constructor.prototype.constructor=constructor;

        if(methods) extend(constructor.prototype,methods);

        if(statics) extend(constructor,statics);

        return constructor;

    };

    Function.prototype.extend=function(constructor,methods,statics){

        return defineSubclass(this,constructor,methods,statics);

    };

    // 创建一个抽象类

    var AbstractStorage=function AbstractStorage(){

        throw new Error('Can\'t create abstract class instance');

    };

    // 添加抽象类的实例方法(已实现)

    extend(AbstractStorage.prototype,{

        setItem:function(k,v){

            k=encodeURIComponent(k);

            v=encodeURIComponent(v);

            this.storage.setItem(k,v);

            return this;

        },

        getItem:function(k){

            k=encodeURIComponent(k);

            return decodeURIComponent(this.storage.getItem(k));

        },

        removeItem:function(k){

            k=encodeURIComponent(k);

            this.storage.removeItem(k);

            return this;

        },

        setMaxAge:function(age){ // 为IE的userData版本预留了设置有效期的方法

            if(isNaN(age)) throw new TypeError('userData\' max-age must be a number,but '+age+' is not a number');

            if(this.model&&this.model==='userData') {

                var now=new Date().getTime();

                var expires=now+age*1000;

                this.storage.expires=new Date(expires).toUTCString();

            } else {

                throw new Error('sessionStorage did\'t support set max-age。');

            }

            return this;

        }

    });

    var Storage=null;

    if(win.Storage) {// 实现了Web存储标准的浏览器

        Storage=AbstractStorage.extend(

            function WebStorage(){

                // IE中实现了Web存储标准的版本,在本地目录下无法使用sessonStorage

                if(!win.sessionStorage) {

                    throw new Error('local web is can\'t save sessionStorage');

                }

                this.model='sessionStorage';

                // 默认使用sessionStorage,也可以自己传入,model自行修改

                this.storage=win.sessionStorage;

            }

        );

    } else if(win.navigator.appVersion&&win.navigator.appVersion.indexOf('MSIE')>=0){

        // 不支持web存储标准的IE浏览器(IE11的核心版本已和Netscape统一,IE8以上的支持web存储标准)

        Storage=(AbstractStorage.extend(

            function IEStorage(maxAge){

                this.model='userData';

                this.maxAge=maxAge;

                this.storage=(function initUserData(t){

                    var memory = document.createElement('div');

                    memory.style.display='none';

                    //附加userData行为

                    memory.style.behavior='url("#default#userData")';

                    document.appendChild(memory);

                    if(t.maxAge) {// 设置userData有效期,默认永久,单位毫秒

                        var now=new Date().getTime();

                        var expires=now+t.maxAge*1000;

                        memory.expires=new Date(expires).toUTCString();

                    }

                    memory.load('UserDataStorage'); //载入存储的

                    extend(memory,{

                        setItem:function(k,v){

                            this.setAttribute(k,v);

                            this.save('UserDataStorage');

                            return this;

                        },

                        getItem:function(k){

                            return this.getAttribute(k)||null;

                        },

                        removeItem:function(k){

                            this.removeAttribute(k);

                            this.save('UserDataStorage');

                            return this;

                        }

                    });

                    return memory;

                }(this));

            }

        ));

    }

    win.IStorage=Storage;

    win.memory=new Storage()||null;// 创建一个实例对象,可以在脚本中直接引用

}(window));

 

index.html(简单测试):

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

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

<script type="text/javascript">

    window.onload=function(){

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

        alert(memory.getItem('test'));

    };

</script>

</head>

<body>



</body>

</html>

 

在HTML页面中引用Storage.js文件,可以在宿主环境中直接使用已经生成的实例memory(window.memory)。也可以自己创建一个新实例new IStorage()

memory.setItem('test','success');   // add

alert(memory.getItem('test'));      // select     

memory.removeItem('test');          // delete

 

适用实现了Web存储标准的浏览器(Storage)与IE浏览器(userData),userData的生命周期请自行根据项目进行设置。