JS实现前端缓存的方法


Posted in Javascript onSeptember 21, 2017

在前端浏览器中,有些数据(比如数据字典中的数据),可以在第一次请求的时候全部拿过来保存在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,>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
javascript动画浅析
Aug 30 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
详解Vue中一种简易路由传参办法
Sep 15 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 04 Javascript
原生JS实现飞机大战小游戏
Jun 09 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 #Javascript
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 #jQuery
详解react服务端渲染(同构)的方法
Sep 21 #Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 #Javascript
删除table表格行的实例讲解
Sep 21 #Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 #Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 #Javascript
You might like
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
2007/12/08 Javascript
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
详解如何创建并发布一个 vue 组件
2018/11/08 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
python sys模块sys.path使用方法示例
2013/12/04 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
Python zip函数打包元素实例解析
2019/12/11 Python
Django app配置多个数据库代码实例
2019/12/17 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
应征英语教师求职信
2013/11/27 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
感恩教育月活动总结
2014/07/07 职场文书
2015年考研复习计划
2015/01/19 职场文书
详解Redis瘦身指南
2021/05/26 Redis
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS