How to implement front-end caching in JavaScript

In the front-end browser, some data (such as the data in the data dictionary) can be retrieved and saved in the js object during the first request, so that you do not need to go there every time when needed in the future. Requested the server. 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 at once Front-end cache, define an object to save this data:

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

   Copy after login

2. Front-end page, Define a function to call the background interface to obtain data, and then save it to the local cache object (dicts).

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

   Copy after login

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 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, Map<String, String>> dictCache = (Map<String, 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;  
}

##Related recommendations:

Summary of the front-end caching mechanism

##Detailed explanation of http caching written to the front-end

Several local caching mechanisms on the front end

Use JS to implement front-end caching

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