针对数据较多的页面的缓存实现

在产品，需求，合同创建时，由于页面录入较大，可能会出现录入超时导致使用人员重新录入问题，现增加页面缓存的方式解决问题：

 

//定义一个storage 可根据实际业务选择local还是session

var storage = window.localStorage;

//定时保存页面数据，key是唯一的可使用模块名_表单名命名，val为需要缓存的数据指我们的表单提交时的数据，格式为a=1&b=2&c=3;

storage.setItem(key,val);    

demo

setInterval(function(){

     /*公共form表单*/

        var form1 = $("#form1").serialize() ;//合同标识、主体信息

        var form5 = $("#form5").serialize() ;//合同价款

//序列化之后的表单数据是经过url编码的，所以需要先解码;

        storage.setItem(‘con_form1’,decodeURIComponent(form1,true) );

        storage.setItem(‘con_form5 ,decodeURIComponent(form5,true));

 

}

,5000);

//在页面初始化时候，获取storage 中key的值，取到的值格式为{‘a’:’1’,’b’:’2’}为json格式，可直接通过$("#form").form("load", obj)，来回显表单数据；

Var obj = storageUtil.getStorageData(storage ,key);

Demo

Function init(){

Var form1 = storageUtil.getStorageData(storage ,’form1’);

$("#form1").form("load", form1 );

Var form2 = storageUtil.getStorageData(storage ,’form2’);

$("#form5").form("load", form5 );

}

 

//在页面表单提交的方法中调用，目的是清除页面缓存；

storage.removeItem(key);

Demo

Function destory(){

storage.removeItem(’form1’);

storage.removeItem(’form5’);

}

 

//依赖方法

var storageUtil = {        
        getStorageData: function (storage,key) {
        var    from_data = storage.getItem(key);
        if(typeof(from_data)!='undefined'&&from_data!=''&&from_data!=null){
            from_data = from_data.replace(/&/g, "','" );
            from_data = from_data.replace(/=/g, "':'" );
            from_data = "({'" +from_data + "'})";
            return eval(from_data);
        }
            return '';
        },
        getStorageJosnData: function (storage,key) {
        var    from_data = storage.getItem(key);
        if(from_data!=null){            
            return JSON.parse(from_data);
        }
            return null;
        },
        setStorageJson: function (key,val) {
            storage.setItem(key,JSON.stringify(val));
        }
    };

转载于:https://my.oschina.net/u/3647536/blog/1825040