JS operation front-end cache

This time I will bring you JS operation front-end cache. What are the precautions for JS operation front-end cache? The following is a practical case, let's take a look.

In the front-end browser, some data (such as data in the data dictionary) can be retrieved and saved in the js

object during the first request. There is no need to request the server every time when needed. For pages that heavily use data dictionaries to populate drop-down boxes, this approach can greatly reduce server visits. This method is particularly suitable for framework using iframes.

Specific implementation ideas and methods:

Create a cache.js file:

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

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

2. On the front-end page,

define a function to call the backend interface to obtain 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');
}

When the main page is loaded, call this method to obtain the data 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 example below) 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,>

I believe you have mastered the method after reading the case in this article, more Please pay attention to other related articles on the php Chinese website!

Recommended reading:

Shiro authorization implementation detailed explanation

How vue proxyTable implements interface cross-domain request debugging

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