JS实现前端缓存的方法
时间:2019-04-07
本文章向大家介绍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,>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 基于Spring Mvc实现的Excel文件上传下载
- Java程序员的日常—— Arrays工具类的使用
- Mysql-14-mysql的日志管理
- ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)
- Java程序员的日常 —— static的用法讲解实践
- WSAEventSelect模型 ---应用实例,重写TCP服务器实例
- Mysql-13mysql的复制
- 蓝牙门禁系统
- Java程序员的日常 —— 工作一天的收获
- Mysql-12-mysql的备份和恢复
- WSAEventSelect模型
- 事件分发机制学习
- Java程序员的日常—— 《编程思想》关于类的使用常识
- Mysql-7-mysql函数
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 聊聊dubbo-go的DefaultHealthChecker
- Java后端面试学习知识总结
- Spring框架源码脉络分析(一):IoC与容器、Bean和BeanDefinition
- Spring-Data-Redis 2.X以上版本使用心得和一些坑
- Java后端面试学习知识总结——数据库:MySQL
- Java 记一次自定义比较器中compareTo方法使用long强转int作为比较结果产生的bug
- SpringCloud 使用feign报错
- Java 使用Runtime在一个Java程序中启动和关闭另一个Java程序
- 解决虚拟机Centos7 报错 curl#56
- Java 桶排序实现 如何判断该放到哪个桶里
- Java selenium使用ChromeDriver截图 解决get超时后续任务报错问题
- 冒泡排序-排序算法
- Java中JDBC工具类封装
- 3.深入k8s:Deployment控制器
- 使用FreeSurfer进行脑区分割