Méthode d'implémentation du cache frontal JS et introduction aux caractéristiques du Cookie

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, de sorte que vous n'avez pas besoin de demander le serveur à chaque fois en cas de besoin. le futur. 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.

Cet article présente principalement la méthode JS pour implémenter la mise en cache frontale en détail. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

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

Créez un fichier cache.js :

1 Page Front-end, définissez les données qui doivent être obtenues à partir du front-end. cache à la fois, et définissez un objet Pour enregistrer ces données :

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

2. Sur la page front-end, définissez une fonction pour appeler l'interface d'arrière-plan pour obtenir données, puis enregistrez-les dans des objets de cache local (dicts).

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

Appelez cette méthode lorsque la page principale est chargée pour obtenir les données en une seule fois et les mettre en cache. 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éfinir une interface pour interroger la base de données (ou interroger le cache du serveur, comme dans l'exemple ci-dessous) en fonction de la requête frontale pour obtenir les données et les renvoyer. au 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, string="">> dictCache = (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;
}</string,></string,>

1. Caractéristiques des cookies

1) La taille des cookies est limitée. à 4 Ko et ne peut pas accepter de fichiers ou de données de courrier électronique volumineux.

2) Tant qu'il y aura une demande impliquant des cookies, les cookies seront envoyés dans les deux sens entre le serveur et le navigateur (cela explique pourquoi les fichiers locaux ne peuvent pas tester les cookies). De plus, les données du cookie sont toujours transportées dans la requête http depuis la même origine (même si cela n'est pas nécessaire), ce qui est également une raison importante pour laquelle le cookie ne peut pas être trop volumineux. La distribution des cookies orthodoxes est obtenue en étendant le protocole HTTP. Le serveur ajoute une ligne d'instructions spéciale à l'en-tête de réponse HTTP pour inviter le navigateur à générer le cookie correspondant conformément aux instructions.

3) Chaque fois qu'un utilisateur demande des données au serveur, des cookies seront envoyés au serveur avec ces demandes. Les langages de script serveur tels que PHP peuvent traiter les données envoyées par les cookies, ce qui peut être considéré comme étant. très pratique. Bien sûr, le frontal peut également générer des cookies. Utiliser js pour gérer les cookies est assez fastidieux. Le navigateur ne fournit qu'un objet tel que document.cookie, et l'attribution et l'obtention de cookies sont difficiles. En PHP, nous pouvons définir des cookies via setcookie() et obtenir des cookies via le tableau super-global $_COOKIE.

Le contenu du cookie comprend principalement : le nom, la valeur, le délai d'expiration, le chemin et le domaine. Le chemin et le domaine forment ensemble la portée du cookie. Si le délai d'expiration n'est pas défini, cela signifie que la durée de vie de ce cookie est pendant la session du navigateur. Lorsque la fenêtre du navigateur est fermée, le cookie disparaît. Ce type de cookie qui dure pendant toute la durée de la session du navigateur est appelé cookie de session. Les cookies de session ne sont généralement pas stockés sur le disque dur mais en mémoire Bien entendu, ce comportement n'est pas spécifié par la spécification. Si un délai d'expiration est défini, le navigateur enregistrera les cookies sur le disque dur. Si vous fermez et rouvrez le navigateur, ces cookies resteront valables jusqu'à ce que le délai d'expiration défini soit dépassé. Les cookies stockés sur le disque dur peuvent être partagés entre différents processus de navigateur, tels que deux fenêtres IE. Différents navigateurs ont différentes méthodes de traitement des cookies stockés en mémoire.

Recommandations associées :

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!