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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
JavaScript中的事件处理
Jan 16 Javascript
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
vue.js中实现登录控制的方法示例
Apr 23 Javascript
angular2路由之routerLinkActive指令【推荐】
May 30 Javascript
Vue-Router基础学习笔记(小结)
Oct 15 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 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脚本的10个技巧(4)
2006/10/09 PHP
[原创]效率较高的php下读取文本文件的代码
2008/07/02 PHP
精通php的十大要点(上)
2009/02/04 PHP
PHP四大安全策略
2014/03/12 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
来自qq的javascript面试题
2010/07/24 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
js对象内部访问this修饰的成员函数示例
2014/04/27 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
[42:39]老党炸弹人试玩视频
2014/09/03 DOTA
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
Python批量修改图片分辨率的实例代码
2019/07/04 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
python selenium 获取接口数据的实现
2020/12/07 Python
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
彪马日本官网:PUMA日本
2019/01/31 全球购物
药学专业毕业生求职信
2013/10/20 职场文书
汽车维修求职信
2014/06/15 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
党员创先争优心得体会
2014/09/11 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
新闻稿标题
2015/07/18 职场文书
教师教育心得体会
2016/01/19 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
利用Python实现Picgo图床工具
2021/11/23 Python