高級之路篇十六：web存儲模仿微信小程序的緩存api

 模仿微信小程序數據緩存的api，對h5本地存儲的封裝，支持sessionStorage與localStorage

function Storage(){

    this.getDataType = function(data){

        var result = '';

        if( typeof data === 'string' || 
            typeof data === 'number' ||
            typeof data === 'undefined' || 
            typeof data === 'function'
            ){
                result = (typeof data);
            }
        else if(data === null)  result = 'null';
        else if(data instanceof Array )  result = 'array';
        else if(data instanceof Object )  result = 'object';
        

        return result;

    }

    this.isFunction = function(val){
        return typeof val === 'function';
    }

    //同步版本

    /**
     *
     *
     * @param {string} key
     * @param {any} data
     * @param {boolean} isSession
     */
    this.setStorageSync = function(key, data, isSession){
        
        var _data = {};
        _data.type = this.getDataType(data);
        _data.data = data;

        window[ isSession ? 'sessionStorage' : 'localStorage' ].setItem(key, JSON.stringify(_data));

    }

    /**
     *
     *
     * @param {string} key
     * @param {boolean} isSession
     * @returns
     */
    this.getStorageSync = function(key, isSession){
        
        var _data = window[ isSession ? 'sessionStorage' : 'localStorage' ].getItem(key);

        if(_data){
            return JSON.parse(_data).data;
        }
        else 
            return undefined;

    }

    /**
     *
     *
     * @param {string} key
     * @param {boolean} isSession
     * @returns
     */
    this.removeStorageSync = function(key, isSession){
        
        window[ isSession ? 'sessionStorage' : 'localStorage' ].removeItem(key);

    }

    /**
     *
     *
     * @param {string} key
     * @param {boolean} isSession
     * @returns
     */
    this.clearStorageSync = function(isSession){
        
        window[ isSession ? 'sessionStorage' : 'localStorage' ].clear();

    }

    //異步版本
    
    /**
     *
     *
     * @param {key:string, data: object, isSession:boolean, success:function, fail:function, complete:function } object
     */
    this.setStorage = function(object){

        if(object.key && this.getDataType(object.key) === 'string'){
            var _this = this;
            setTimeout(function(){

                try{
                    _this.setStorageSync(object.key, object.data, object.isSession);
                    _this.isFunction(object.success) && object.success();
                }catch(e){
                    _this.isFunction(object.error) && object.error();
                }finally{
                    _this.isFunction(object.complete) && object.complete();
                }
                
            }, 0)
        }

    }

    /**
     *
     *
     * @param {key:string, isSession:boolean, success:function, fail:function, complete:function } object
     */
    this.getStorage = function(object){

        if(object.key && this.getDataType(object.key) === 'string'){
            var _this = this;
            setTimeout(function(){

                try{
                    _this.isFunction(object.success) && object.success( _this.getStorageSync(object.key, object.isSession) );
                }catch(e){
                    _this.isFunction(object.error) && object.error();
                }finally{
                    _this.isFunction(object.complete) && object.complete();
                }
                
            }, 0)
        }

    }

    /**
     *
     *
     * @param {key:string, isSession:boolean, success:function, fail:function, complete:function } object
     */
    this.removeStorage = function(object){

        if(object.key && this.getDataType(object.key) === 'string'){
            var _this = this;
            setTimeout(function(){

                try{
                    _this.removeStorageSync(object.key, object.isSession);
                    _this.isFunction(object.success) && object.success();
                }catch(e){
                    _this.isFunction(object.error) && object.error();
                }finally{
                    _this.isFunction(object.complete) && object.complete();
                }
                
            }, 0)
        }

    }

    /**
     *
     *
     * @param {isSession:boolean, success:function, fail:function, complete:function } object
     */
    this.clearStorage = function(object){

        var _this = this;
        setTimeout(function(){

            try{
                _this.clearStorageSync(object.isSession);
                _this.isFunction(object.success) && object.success();
            }catch(e){
                _this.isFunction(object.error) && object.error();
            }finally{
                _this.isFunction(object.complete) && object.complete();
            }
            
        }, 0)
        

    }

}

//用法示例
var t = new Storage();


//localStorage


//同步存儲
t.setStorageSync("test", {a: 123});
//同步讀取，返回存儲值
var r = t.getStorageSync("test");
console.log(r)

//異步存儲
t.setStorage({
    key: "test1",
    data: {a: 11111},
    success: function(){
        console.log("異步存儲成功")
    }
})
//異步讀取，success回調函數接收存儲值
t.getStorage({
    key: "test1",
    success: function(res){
        console.log("異步讀取數據成功，", res)
    }
})


//sessionStorage

t.setStorageSync("test", "我是一張弓！！！", true);
var q = t.getStorageSync("test", true);
console.log("來自 sessionStorage 的數據，", q);

t.setStorage({
    key: "test1",
    data: {a: 9999999999999},
    isSession: true,
    success: function(){
        console.log("異步存儲成功")
    }
})
//異步讀取，success回調函數接收存儲值
t.getStorage({
    key: "test1",
    isSession: true,
    success: function(res){
        console.log("來自 sessionStorage 異步讀取數據成功，", res)
    }
})

示例運行結果如下：