JavaScript でフロントエンド キャッシュを実装する方法

フロントエンド ブラウザでは、最初のリクエスト中に一部のデータ (データ ディクショナリ内のデータなど) を取得して js オブジェクトに保存できるため、必要なときに毎回サーバーをリクエストする必要はありません。未来。ドロップダウン ボックスにデータを入力するためにデータ ディクショナリを頻繁に使用するページの場合、このアプローチによりサーバーへのアクセスが大幅に削減されます。この方法は、iframe を使用したフレームで特にうまく機能します。

具体的な実装アイデアと方法:

cache.js ファイルを作成します:

1. フロントエンド ページ、フロントエンド キャッシュから一度に取得する必要があるデータを定義し、オブジェクトを定義します。これらのデータを保存します:

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

2. フロントエンド ページで、バックエンド インターフェイスを呼び出してデータを取得し、それをローカル キャッシュ オブジェクト (dict) に保存する関数を定義します。

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

このメソッドを呼び出してデータを一度に取得し、メインページのロード時にキャッシュします。このようにして、将来同じデータが必要になった場合、ローカル オブジェクトの辞書から直接取得できます。

バックエンド コントローラー:

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 中国語 Web サイトの他の関連記事を参照してください。