Comment implémenter la mise en cache frontale en JavaScript

Dans le navigateur frontal, certaines données (telles que les données du dictionnaire de données) peuvent être récupérées et enregistrées dans l'objet js lors de la première requête, afin que vous n'ayez pas à y aller à chaque fois en cas de besoin à l'avenir. Demandé au serveur. Pour les pages qui utilisent beaucoup de dictionnaires de données pour remplir les listes déroulantes, cette approche peut réduire considérablement les visites sur le serveur. Cette méthode fonctionne particulièrement bien avec les frames utilisant des iframes.

Idées et méthodes d'implémentation spécifiques :

Créez un fichier cache.js :

1. Page frontale, définissez les données à conserver. obtenu d'un coup Front-end cache, définissez un objet pour sauvegarder ces données :

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

2. Page frontale, définissez une fonction pour appeler l'interface d'arrière-plan pour obtenir des données, puis enregistrez-la dans l'objet de cache local (dicts).

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

Appelez cette méthode pour obtenir les données immédiatement lorsque la page principale est chargement. De cette façon, si vous avez besoin des mêmes données à l'avenir, vous pouvez les obtenir directement à partir des dictionnaires d'objets locaux.

Contrôleur backend :

3. Définissez une interface pour interroger la base de données (ou interroger le cache du serveur, comme dans l'exemple ci-dessous) pour obtenir des données et les renvoyer à 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;  
}

Recommandations associées :

Résumé du mécanisme de mise en cache frontale

cache http écrit sur le front-end Explication détaillée

Plusieurs mécanismes de mise en cache locale sur le front-end

Utiliser JS pour implémenter la mise en cache frontale

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!