Implement front-end caching using JS

Use JS to implement front-end caching

In the front-end browser, some data (such as data in the data dictionary) can be retrieved in the first request Come over and save it in a js object, so you don’t have to request the server every time you need it in the future. For pages that heavily use data dictionaries to populate drop-down boxes, this approach can greatly reduce server visits. This method works especially well with frames using iframes.

Specific implementation ideas and methods:

Create a cache.js file:

1. Front-end page, define which data needs to be obtained from the front-end cache at one time, and define an object To save this data:

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

2. For the front-end page, define a function to call the back-end interface to obtain the data, and then save it to the local cache object (dicts).

function getDicts() {
    $.post(getContextPath() + /api/sys/getDictList,            clsCodes,            function(resultBean, status, xhRequest) {                if (resultBean.data != undefined) {
                    dicts = resultBean.data;
                }
            }, 
            'json');
}

Call this method when the main page is loaded to obtain the data at once and cache it. In this way, if you need the same data in the future, you can get it directly from the local object dicts.

Backend Controller:

3. Define an interface to query the database (or query the server cache, as in the following example) according to the front-end request to obtain data and return it to the front-end:

/**
 * 根据多个分类编号获取多个字典集合
 * @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,>

The above is the detailed content of Implement front-end caching using JS. For more information, please follow other related articles on the PHP Chinese website!