JavaScript如何實現前端快取

在前端瀏覽器中，有些資料（例如資料字典中的資料），可以在第一次要求的時候全部拿過來保存在js物件中，以後需要的時候就不用每次都去請求伺服器了。對於那些大量使用資料字典來填入下拉框的頁面，這種方法可以大幅減少對伺服器的存取。這種方法特別適用於使用iframe的框架。

具體實作想法與方法：

建立一個cache.js檔案：

1、前端頁面，定義那些資料需要一次拿到前端緩存，定義一個物件來保存這些資料：

1. #

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

2、前端頁面，定義一個函數來呼叫後台介面取得數據，然後儲存到本機快取物件（dicts）中。

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

#在主頁面載入的時候呼叫這個方法一次取得資料並快取起來。這樣，以後需要同樣的數據，就直接從本地物件dicts中取得了。

後端Controller：

3、定義一個接口，根據前端的請求，查詢資料庫（或查詢伺服器緩存，如下面範例）取得資料返回給前端：

/** 
 * 根据多个分类编号获取多个字典集合 
 * @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;  
}

相關推薦：

前端快取機制的摘要

#寫給前端的http快取詳解

前端幾種本機快取機制

#使用JS實作前端快取

以上是JavaScript如何實現前端快取的詳細內容。更多資訊請關注PHP中文網其他相關文章！