把ajax获取的数据缓存起来,h5-localStorage实现缓存ajax请求数据

使用背景：要实现每次鼠标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对象// 执行能力雷达图的数据绑定及展示

}

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

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

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

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

Ajax请求数据的两种方式

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

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

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

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

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

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

IE10浏览器会把AJAX请求的数据都缓存下来,然后每次想去刷新数据时发现数据都是一样的,于是导致数据显示异常. 解决方法: 在页面

标签里,加上以下声明: