使用背景:要实现每次鼠标hover“能力雷达”,则显示能力雷达图(通过ajax请求数据实现雷达图数据显示),所以每次hover都去请求ajax会影响性能,因此这里要用到本地缓存。

实现:

此处是通过传id去请求能力雷达图数据,因此要setItem()的不止1个,所以当ajax返回result后,根据id去创建名称 

  1. $.ajax({
  2. type: "POST",
  3. cache: false,
  4. url: "/Question/GetShopRadarMap",
  5. data: {
  6. shopId: id
  7. },
  8. contentType: "application/x-www-form-urlencoded",
  9. dataType: "json",
  10. async: false,
  11. success: function (result) {
  12. localStorage.setItem("radarResult_" + id + "", JSON.stringify(result.resultList)); //存储的时候 使用JSON.stringify()将对象解析出字符串
  13.             var resultList = result.resultList;
  1.             // 执行能力雷达图的数据绑定及展示
  1. } });

当鼠标再次hover能力雷达图的时候:根据id获取已经存储了的数据,就不用每次都去发送请求

  1. var storage = localStorage.getItem("radarResult_" + id + "");
  2. if (storage != null) {
  3. var resultList = JSON.parse(storage); // 从一个字符串中解析出json对象
  4. // 执行能力雷达图的数据绑定及展示
  5. }

h5-localStorage实现缓存ajax请求数据的更多相关文章

  1. 关于ajax请求数据,并将数据赋值给全局变量的一些解决方法

    在使用ajax请求数据是,开始的时候是打算将ajax的数据取出,并赋予给全局变量,但是在实际编码过程中发现并不能将数据赋予给最开始定义的全局变量,出现这个问题的原因是由于ajax异步加载的原因,所以只 ...

  2. vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询

    vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询 基于element Transfer http://element-cn.eleme.io/#/zh-CN/comp ...

  3. Ajax请求数据的两种方式

    ajax 请求数据的两种方法,有需要的朋友可以参考下. 实现ajax 异步访问网络的方法有两个.第一个是原始的方法,第二个是利用jquery包的 原始的方法不用引入jquery包,只需在html中编写 ...

  4. session失效,使用ajax请求数据被拦截,此时正常的处理逻辑是跳到登录界面,而不是界面没有变化(java推断是否是ajax请求)

    在登录过滤器中.推断请求是ajax请求还是超链接或者地址栏变化的请求 if (httpServletReq.getHeader("x-requested-with") != nul ...

  5. 使用Python的Flask框架,结合Highchart,动态渲染图表(Ajax 请求数据接口)

    参考链接:https://www.highcharts.com.cn/docs/ajax 参考链接中的示例代码是使用php写的,这里改用python写. 需要注意的地方: 1.接口返回的数据格式,这个 ...

  6. 解决IE浏览器缓存导致AJAX请求数据异常

    IE10浏览器会把AJAX请求的数据都缓存下来,然后每次想去刷新数据时发现数据都是一样的,于是导致数据显示异常. 解决方法: 在页面<head>标签里,加上以下声明: <!-- 解决 ...

  7. 唯独ie浏览器缓存ajax请求

    用fiddler调试http请求,在ie浏览器下,如果请求命中缓存,fiddler不会包含该请求.但是在chrome下会包含缓存的请求,Result显示为304. ie浏览器还会缓存通过ajax请求的 ...

  8. 使用ajax请求数据时的几种做法

    在进行前后端交互的时候,一般前端使用ajax向后端发送数据,后端根据发送的数据来返回数据,前端将这些数据接收并进行相应的处理 以下是在日常工作中总结的几点使用ajax传递数据时的情况: 1.在本页面( ...

  9. 前端缓存API请求数据

    1. 背景 在一些项目中,有时候会出现不同模块重复请求大量相同api接口的情况,特别是在一些功能相似的后台管理页面中.以下面这几个页面为例,每次进入页面都需要请求等大量重复的下拉框数据,下拉框数据短时 ...

随机推荐

  1. loadrunner脚本中写入脚本输出log到外部文件,分析参数取值方式

    loadrunner脚本中写入脚本输出log到外部文件,分析参数取值方式 分类: 心得 loadrunner 我的测试 2012-04-01 12:52 2340人阅读 评论(0) 收藏 举报 脚本l ...

  2. java之this关键字

    this使用范围 1.在类的方法定义中使用的this关键字代表调用该方法对象的引用. 2.当必须指出当前使用方法的对象是谁时,要使用关键字this. 3.有时使用this可以处理方法中成员变量和参数重 ...

  3. C语言-一个fopen函数中未使用二进制模式(b)引发的血案

    转自:http://blog.csdn.net/hinyunsin/article/details/6401854 最近写了一个网络文件传输模块,为了让这个模块具有更好的移植性,我尽量使用C标准IO ...

  4. 设置U盘启动

    利用快捷键来设置U盘启动,利用快捷键启动相对来说比较简单快捷,推荐大家使用(重要提醒:选择热键前,请先插入U盘) 组装机主板 品牌笔记本 品牌台式机 主板品牌 启动按键 笔记本品牌 启动按键 台式机品 ...

  5. WPF入门教程系列三

    WPF之Binding的使用(一) 一.  前言 初学WPF经常被Binding搞得苦不堪言,Binding的重用性就不做介绍了,在WPF应用程序开发中Binding是一个非常重要的部分.WPF也是近 ...

  6. 很实用的JQuery代码片段(转)

    1 元素屏幕居中 jQuery.fn.center = function () { this.css("position","absolute"); this. ...

  7. C++ regex

    我TM看了很久的文档,还是无法理解为什么我用MinGW GCC 4.8.1编译的C++11 <regex>总是抛出异常:regex_error 还是下载boost regex吧 或者c语言 ...

  8. SQL : IN 和 Exists 的区别

    Sql语句中IN和exists的区别及应用 表展示 首先,查询中涉及到的两个表,一个user和一个order表,具体表的内容如下: user表: order表: in 确定给定的值是否与子查询或列表中 ...

  9. ORACLE函数之日期时间转换函数

     1.          TO_CHAR 语法:TO_CHAR(X [,format]) 说明:将X按format格式转换成字符串.X是一个日期或者数字.format是一个规定了X採用何种格式转换 ...

  10. 【转】Monkey测试5-运行中停止monkey

    停止monkey自动测试步骤: 1.ps命令  查找uiautomator的进程 打开cmd命令行窗口 输入: adb shell ; ps | grep monkey; 返回来的第一个数字,即是mo ...