JS operation front-end cache-JS Tutorial-php.cn

This time I will bring you JS operation front-end cache. What are theprecautions for JS operation front-end cache? The following is a practical case, let's take a look.

In the front-end browser, some data (such as data in the data dictionary) can be retrieved and saved in the js

objectduring the first request. There is no need to request the server every time when needed. For pages that heavily use data dictionaries to populate drop-down boxes, this approach can greatly reduce server visits. This method is particularly suitable forframeworkusing iframes.

Specific implementation ideas and methods:

Create a cache.js file:

1. On the front-end page, define which data needs to be obtained from the front-end cache at one time, and define an object to save the data:

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

Copy after login

2. On the front-end page,

define a functionto call the backend interface to obtain data, and then save it to the local cache object (dicts).

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

Copy after login

When the main page is loaded, call this method to obtain the data once and cache it. In this way, if you need the same data in the future, you can get it directly from the local object dicts.

Backend Controller:

3. Define an interface to query the database (or query the server cache, as in the example below) according to the front-end request to obtain data and return it to the 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> dictCache = (Map>) 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; }

Copy after login

I believe you have mastered the method after reading the case in this article, more Please pay attention to other related articles on the php Chinese website!