So implementieren Sie Front-End-Caching in JavaScript

Im Front-End-Browser können einige Daten (z. B. Daten im Datenwörterbuch) bei der ersten Anfrage abgerufen und im js-Objekt gespeichert werden, sodass Sie nicht jedes Mal dorthin gehen müssen wenn der Server in Zukunft benötigt wird. Bei Seiten, die häufig Datenwörterbücher zum Füllen von Dropdown-Feldern verwenden, kann dieser Ansatz die Serverbesuche erheblich reduzieren. Diese Methode funktioniert besonders gut mit Frames, die Iframes verwenden.

Spezifische Implementierungsideen und -methoden:

Erstellen Sie eine Cache.js-Datei:

1. Definieren Sie auf der Frontend-Seite, welche Daten gespeichert werden müssen Sofort erhalten Front-End-Cache, definieren Sie ein Objekt zum Speichern dieser Daten:

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

   Nach dem Login kopieren

2. Front-End-Seite, definieren Sie eine Funktion zum Aufrufen der Hintergrundschnittstelle, um Daten abzurufen, und speichern Sie sie dann im lokalen Cache-Objekt (dicts).

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

   Nach dem Login kopieren

Rufen Sie diese Methode auf, um die Daten sofort abzurufen, wenn die Hauptseite angezeigt wird wird geladen. Wenn Sie in Zukunft dieselben Daten benötigen, können Sie diese auf diese Weise direkt aus den lokalen Objektdikten abrufen.

Backend-Controller:

3. Definieren Sie eine Schnittstelle zum Abfragen der Datenbank (oder zum Abfragen des Server-Cache, wie im Beispiel unten), um Daten abzurufen und an diese zurückzugeben Frontend:

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

Verwandte Empfehlungen:

Zusammenfassung des Front-End-Caching-Mechanismus

HTTP-Cache an das Frontend geschrieben Detaillierte Erklärung

Mehrere lokale Caching-Mechanismen am Frontend

Verwendung von JS zur Implementierung von Front-End-Caching

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Front-End-Caching in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!