前端数据缓存（一）

绝地灬酷狼 2022-04-11 07:26 226阅读 0赞

说到缓存一般针对后台缓存数据，提高数据查询效率，减少响应时间。不过在前端开发中也会遇到一些需要缓存数据的时候，比如说存储页面查询条件翻页数据、全局变量等，如果小的数据可以存储在cookies中，但是数据多了就不行了，下面介绍下前台缓存的简单实现：

/**
     * cache 类定义，cache对象在main.jsp 中定义
     * @param {Object} scope
     * @memberOf {TypeName} 
     * @return {TypeName} 
     */
    var BaseCache = function(scope){
    	this.scope = scope;
    	this.gloableCache = this._getPrmGoableCache();
    	//init
    	if(this.gloableCache){
    		if(this.gloableCache[this.scope] == undefined){//全局cache，所以不会重新生成cache
    			this.gloableCache[this.scope] = {};
    		}
    	}
    	
    }

定义一个构造函数，不同的功能有不同的缓存，定义缓存基本方法

BaseCache.prototype = {
    	_getPrmGoableCache : function(){
    		if(top===self){//topest window
                if(window.prmGloableCache){
                	return window.prmGloableCache;
                }
            }else{
                var p=parent;
                while(p){
                    if(p.prmGloableCache|| p.top==p.self){
                        break;
                    }else{
                        p=p.parent;
                    }
                }
    	        if(p.prmGloableCache){
    	            return p.prmGloableCache;
    	        }
            }
    	},
    	put:function(key, value){
    		if(this.gloableCache && this.gloableCache[this.scope]){
    			this.gloableCache[this.scope][key] = value;
    		}
    	},
    	get:function(key){
    		if(this.gloableCache && this.gloableCache[this.scope]){
    			return this.gloableCache[this.scope][key];
    		}
    	},
    	clear:function(){
    		if(this.gloableCache && this.gloableCache[this.scope]){
    			return this.gloableCache[this.scope] = {};
    		}
    	},
    	clearByKey:function(key){
    		if(this.gloableCache && this.gloableCache[this.scope]){
    			delete this.gloableCache[this.scope][key];
    		}
    	}
    };

下面举个例子来使用该缓存，比如说缓存页面查询条件：

在查询后，调用form.saveQueryParam来保存查询条件，在返回需要回显查询条件时，调用 getQueryParam（）。