這次帶給大家JS操作前端緩存,JS操作前端快取的注意事項有哪些,下面就是實戰案例,一起來看一下。
在前端瀏覽器中,有些資料(例如資料字典中的資料),可以在第一次要求的時候全部拿過來保存在js物件中,以後需要的時候就不用每次都去請求伺服器了。對於那些大量使用資料字典來填入下拉框的頁面,這種方法可以大幅減少對伺服器的存取。這種方法特別適用於使用iframe的框架。
具體實作思路與方法:
建立一個cache.js檔:
# 1.前端頁面,定義那些資料需要一次拿到前端緩存,定義一個物件來保存這些資料:
/** * 定义需要在用户登录的时候获取到本地的数据字典类别 */ var clsCodes = {clsCodes : [BOOL, STATUS, USER_TYPE, REPORT_STATUS ] }; /** * 获取数据字典到本地 */ var dicts;
2、前端頁面,定義一個函數來呼叫後台介面取得數據,然後儲存到本機快取物件(dicts)。
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, 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,>
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是JS操作前端快取的詳細內容。更多資訊請關注PHP中文網其他相關文章!