Use JS to implement front-end caching

Use JS to implement front-end caching

In front-end browsers, some data (such as data in the data dictionary) can be retrieved and stored in the js object during the first request, you do not need to request the server every time you need it. This method can greatly reduce access to servers for pages that use a large amount of data dictionary to fill the drop-down box. This method is particularly applicable to the iframe framework.

Specific implementation ideas and methods:

 

Create a cache. js file:

1. on the front-end page, define the data that needs to be cached at one time and define an object to save the data:

 

/*** Defines the local data dictionary category that needs to be obtained during user login */var clsCodes = {clsCodes: [BOOL, STATUS, USER_TYPE, REPORT_STATUS]}; /*** get the data dictionary to the local machine */var dicts;

2. Define a function on the front-end page to call the background interface to obtain data and 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 loading the homepage to obtain and cache data at one time. In this way, the same data will be obtained directly from the local object dicts.

Backend Controller:

3. Define an interface to query the database (or query the server cache, as shown in the following example) based on the frontend request and return the data to the frontend:

 

/*** Obtain multiple dictionary Sets Based on Multiple Category numbers * @ param clsCodes * @ return {clsCode: {code1: name1, code2: name2 ...}},...} */@ resolve ({unchecked, rawtypes}) @ ResponseBody @ RequestMapping (getDictList) public ResultBean getDictList (@ RequestParam (value = clsCodes [], required = true) String [] clsCodes) {ResultBean rb = new ResultBean (); Map
 
  
> DictCache = (Map
  
   
>) CacheManager. getInstance (). get (CacheConstants. DICT); Map dictMap = new LinkedHashMap <> (); // use LinkedHashMap to ensure the order if (dictCache! = Null) {for (String clsCode: clsCodes) {dictMap. put (clsCode, dictCache. get (clsCode) ;}} else {rb. setMessage (Dictionary information cannot be obtained in the cache !); Rb. setSuccess (false);} rb. setData (dictMap); return rb ;}