JS实现前端缓存的方法

前端之家收集整理的这篇文章主要介绍了JS实现前端缓存的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在前端浏览器中,有些数据(比如数据字典中的数据),可以在第一次请求的时候全部拿过来保存在js对象中,以后需要的时候就不用每次都去请求服务器了。对于那些大量使用数据字典来填充下拉框的页面,这种方法可以极大地减少对服务器的访问。这种方法特别适用于使用iframe的框架。

具体实现思路和方法

创建一个cache.js文件

1、前端页面,定义那些数据需要一次性拿到前端缓存,定义一个对象来保存这些数据:

用户登录的时候获取到本地的数据字典类别 */ var clsCodes = {clsCodes : [BOOL,STATUS,USER_TYPE,REPORT_STATUS ] };

/**

  • 获取数据字典到本地
    */
    var dicts;

2、前端页面,定义一个函数调用后台接口获取数据,然后保存到本地缓存对象(dicts)中。

在主页面加载的时候调用这个方法一次性获取数据并缓存起来。这样,以后需要同样的数据,就直接从本地对象dicts中获取了。

后端Controller:

3、定义一个接口,根据前端的请求,查询数据库(或查询服务器缓存,如下面例子中)获取数据返回给前端:

  • 根据多个分类编号获取多个字典集合
  • @param clsCodes
  • @return {{clsCode : {code1:name1,code2:name2...}},...}
    */
    @SuppressWarnings({ unchecked,rawtypes })
    @ResponseBody
    @RequestMapping(getDictList)
    public ResultBean getDictList(@RequestParam(value = clsCodes[],required = true) String[] clsCodes) {
    ResultBean rb = new ResultBean();
  • Map<string,string="">> dictCache = (Map<string,string="">>) CacheManager.getInstance().get(CacheConstants.DICT);
    Map dictMap = new LinkedHashMap<>(); //使用LinkedHashMap保证顺序

    if(dictCache != null){
    for(String clsCode: clsCodes){
    dictMap.put(clsCode,dictCache.get(clsCode));
    }
    }else{
    rb.setMessage(缓存中拿不到字典信息!);
    rb.setSuccess(false);
    }

    rb.setData(dictMap);
    return rb;
    }</string,></string,>

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    原文链接:https://www.f2er.com/js/36215.html

    猜你在找的JavaScript相关文章