首頁  >  文章  >  web前端  >  JavaScript如何實現前端快取

JavaScript如何實現前端快取

零到壹度
零到壹度原創
2018-04-21 11:35:502143瀏覽

在前端瀏覽器中,有些資料(例如資料字典中的資料),可以在第一次要求的時候全部拿過來保存在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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn