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

实现:

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

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

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

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

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. 移动负载均衡技术(MBL)

    移动负载均衡技术(MBL)   转至元数据结尾 附件:5 被admin添加,被admin最后更新于四月 27, 2015 转至元数据起始 互联网技术发展到今天,已经进入移动时代,很多在传统CS和BS的 ...

  2. iOS开发-自动布局之autoresizingMask使用详解(Storyboard&Code)

    前言:现在已经不像以前那样只有一个尺寸,现在最少的IPHONE开发需要最少需要适配三个尺寸.因此以前我们可以使用硬坐标去设定各个控件的位置,但是现在的话已经不可以了,我们需要去做适配,也许你说可以使用 ...

  3. 项目实践中--Git服务器的搭建与使用指南

    一.前言 Git是一款免费.开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.在平时的项目开发中,我们会使用到Git来进行版本控制. Git的功能特性: 从一般开发者的角度来 ...

  4. Atitit.数据库表的物理存储结构原理与架构设计与实践

    Atitit.数据库表的物理存储结构原理与架构设计与实践 1. Oracle和DB2数据库的存储模型如图: 1 1.1. 2. 表数据在块中的存储以及RowId信息3 2. 数据表的物理存储结构 自然 ...

  5. jquery的param()

    jQuery ajax - param() 方法 jQuery Ajax 参考手册 实例 序列化一个 key/value 对象: var params = { width:1900, height:1 ...

  6. Django数据库表的关联问题

    Django模型中,比较难以理解的要数表和表之间相关联的部分,下面主要说说外键-ForeignKey和ManyToManyField2个字段类型. 我们知道ForeignKey说的是“一对多”,那么问 ...

  7. c++ why can't class template hide its implementation in cpp file?

    类似的问题还有: why can't class template use Handle Class Pattern to hide its implementation? || why there ...

  8. qsort的陷阱

    问:求大神解释这个C程序,为什么在compare_strings中使用return strcmp(p, q);就无法正确排序 #include <string.h> #include &l ...

  9. [转]详解JS闭包

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 闭包的特性 闭包有三个特性: 1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 3.参数 ...

  10. oracle如何将数据导入到另一个表空间

    某个用户的数据在USER表空间里,如果多个用户的数据都在USERS表空间内,将严重影响系统性能,一般在系统迁移的时候,在新的系统里希望导入 一个独立的用户表空间,但是经常无法导入用户指定的缺省表空间, ...