本文主要详细介绍了JS前端缓存的方法，有一定的参考价值，感兴趣的朋友可以参考一下。

在前端浏览器中，一些数据(比如数据字典中的数据)可以在第一次请求时就取并保存在js对象中，这样以后每次需要的时候就不用再向服务器请求了。对于那些使用数据字典填充下拉框的页面，这种方法可以大大减少对服务器的访问。这种方法特别适合使用iframe的框架。

具体实施思路和方法：

创建一个cache.js文件：

1.前端页面，定义哪些数据需要一次性缓存在前端，并定义一个对象来保存这些数据：

/**

*定义用户登录时需要在本地获取的数据字典类别。

*/

var clsCodes={clsCodes:

[布尔，

状态，

用户类型，

报告_状态

]

};

/**

*把数据字典拿到本地

*/

var字典；

2.前端页面，定义一个函数调用后端接口获取数据，然后保存到本地缓存对象(dicts)中。

函数getDicts() {

$.post(getContextPath()/API/sys/getDictList，

clsCodes，

函数(resultBean，status，xhRequest) {

if (resultBean.data！=未定义){

dicts=resultBean.data

}

},

JSON’)；

}

加载主页时，调用此方法一次性获取数据并缓存。这样，如果将来需要相同的数据，可以直接从本地对象dicts中获取。

后端控制器：

3.定义一个接口。根据前端的请求，查询数据库(或查询服务器缓存，如下例)获取数据并返回给前端：

/**

*根据多个分类号得到多个字典集

* @param clsCodes

* @return {{clsCode : {code1:name1，code2:name2.}},}

*/

@SuppressWarnings({未选中，rawtypes })

@ResponseBody

@RequestMapping(getDictList)

public result bean getDictList(@ request param(value=cls codes[]，required=true)String[]cls codes){

result bean Rb=new result bean()；

Mapstring，string= dictCache=(Mapstring，string= )cache manager . getinstance()。get(CacheConstants。DICT)；

map dict map=new linked hashmap()；//使用LinkedHashMap来保证顺序

if(dictCache！=null){

for(String clsCode: clsCodes){

dictMap.put(clsCode，dict cache . get(cls code))；

}

}否则{

Rb.setMessage(缓存中找不到字典信息！);

Rb . set success(false)；

}

Rb . setdata(dict map)；

返回Rb；

}/字符串，/字符串，

这就是本文的全部内容。希望对大家的学习有帮助，支持我们。