Use js to implement front-end caching

Reprinted source: https://blog.csdn.net/clementad/article/details/46807641

In the front-end browser, some data (such as the data in the data dictionary) can be taken and stored in the js object at the first request, so that you don't need to request the server every time you need it later. For pages that make heavy use of data dictionaries to populate drop-down boxes, this approach can greatly reduce server access. This approach works especially well with frames using iframes.

Specific implementation ideas and methods:

Create a cache.js file:

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

[javascript]  view plain copy  

1. /** 
2.  * Define the data dictionary category that needs to be obtained when the user logs in 
3.  */  
4. var clsCodes = {"clsCodes" :  
5.         ["BOOL",  
6.          "STATUS",  
7.          "USER_TYPE",  
8.          "REPORT_STATUS"  
9.      ]  
10. };  
11.   
12. /** 
13.  * Get the data dictionary to the local 
14.  */  
15. var dicts;  

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

[javascript]  view plain copy  

1. function getDicts() {  
2.     $.post(getContextPath() + "/api/sys/getDictList",  
3.             clsCodes,  
4.             function(resultBean, status, xhRequest) {  
5.                 if (resultBean.data != undefined) {  
6.                     dicts = resultBean.data;  
7.                 }  
8.             },   
9.             'json');  
10. }  

When the main page loads, call this method to get the data once and cache it. In this way, if the same data is needed in the future, it is obtained 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) to obtain data and return it to the front-end according to the request of the front-end:

[java]  view plain copy  

1. /** 
2.  * Get multiple dictionary sets based on multiple classification numbers 
3.  * @param clsCodes 
4.  * @return {{"clsCode" : {"code1":"name1,"code2":"name2"...}}, ...} 
5.  */  
6. @SuppressWarnings({ "unchecked", "rawtypes" })  
7. @ResponseBody  
8. @RequestMapping("getDictList")  
9. public ResultBean getDictList(@RequestParam(value = "clsCodes[]", required = true) String[] clsCodes) {  
10.     ResultBean rb = new ResultBean();  
11.       
12.     Map<String, Map<String, String>> dictCache = (Map<String, Map<String, String>>) CacheManager.getInstance().get(CacheConstants.DICT);  
13.     Map dictMap = new LinkedHashMap<>(); //使用LinkedHashMap保证顺序  
14.   
15.     if(dictCache != null){  
16.         for(String  clsCode: clsCodes){  
17.             dictMap.put(clsCode, dictCache.get(clsCode));  
18.         }  
19.     }else{  
20.         rb.setMessage( "Dictionary information is not available in the cache!" );  
21.         rb.setSuccess(false);  
22.     }  
23.   
24.     rb.setData(dictMap);  
25.     return rb;  
26. }