JS method to implement front-end caching

This article mainly introduces the method of JS to implement front-end caching in detail. It has certain reference and learning value for JS. Friends who are interested in JS can refer to this article.

In the front-end browser, some data (such as data in the data dictionary) can be retrieved and saved in the jsobject during the first request, when needed later. There is no need to request the server every time. 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. Front-end page, Define a function to call the background interface to obtain data, and then save it to local cache objects (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 the same data is needed in the future, it can be obtained directly from the local object dicts.

Backend Controller:

3. Define an interface. According to the front-end request, query the database (or query the server cache, as in the example below) to obtain data and return it to 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 entire content of this article, I hope it will be helpful to everyone’s learning! !

Related recommendations:

Detailed explanation of the six error types in JavaScript

How to use javascript to randomly generate a certain number of passwords

Javascript example of calculating gradient color

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