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对象// 执行能力雷达图的数据绑定及展示}

转载于:https://www.cnblogs.com/ss977/p/7792385.html

h5-localStorage实现缓存ajax请求数据相关推荐

ajax浏览器操作发生异常,解决IE浏览器缓存导致AJAX请求数据异常
IE10浏览器会把AJAX请求的数据都缓存下来,然后每次想去刷新数据时发现数据都是一样的,于是导致数据显示异常. 解决方法: 在页面标签里,加上以下声明: 保存后,刷新页面,重新访问即可. 说明:最 ...
ie浏览器如何创建ajax,唯独ie浏览器缓存ajax请求
用fiddler调试http请求,在ie浏览器下,如果请求命中缓存,fiddler不会包含该请求.但是在chrome下会包含缓存的请求,Result显示为304. ie浏览器还会缓存通过ajax请求的 ...
ajax背景、ajax对象、ajax状态、ajax与http、ajax请求数据接口、同步与异步、ajax请求XML数据、封装ajax函数、artTemplate简介、同源策略和跨域请求、JSONP
AJAX简介: ajax背景: 1.AJAX(Asynchronous JavaScript And Xml)异步的 JavaScript 和 XML:ajax是浏览器提供的一套API,最早出现在谷歌 ...
element筛选 ajax,vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询
##vue使用element Transfer 穿梭框实现ajax请求数据和自定义查询基于element Transfer 直接上代码 XXXXX 编辑XXX 编辑XXXX style=" ...
ajax type是get请求,jQuery的Ajax请求数据时type无法使用GET
写一个ASP.NET MVC例子,它是使用jQuery的$.Ajax来呼叫控制器的数据. 创建一个视图: 运行结果: 一切正常,但是本例子我们只是获取数据,并没有做任何数据POST上传至控制器,我们尝 ...
ajax请求数据 ztree_ajax 异步获取数据填充到表格显示(ajax) 文档(Options API) DataTables中文网...
描述(Description) 使用这个参数可以让 DataTables 像使用jQuery ajax 一样从一个数据源获取数据,最终获取到返回的数据来显示表格,DataTables 支持 Java ...
ajax请求数据成功但是success中拿不到数据。
首先来说现象 ajax请求在controller中打断点,发现一切正常,也会正常返回,但是,在success中却收不到数据,再加上error返回,发现返回数据在error中. 这是由于ajax请求中的 ...
python的flask框架显示柱状图_使用Python的Flask框架，结合Highchart，动态渲染图表(Ajax 请求数据接口)...
参考链接:https://www.highcharts.com.cn/docs/ajax 参考链接中的示例代码是使用php写的,这里改用python写. 需要注意的地方: 1.接口返回的数据格式,这个 ...
ajax请求数据渲染个人中心页面
1. 根据用户请求返回个人中心空模板文件数据 # 获取个人中心数据 @route("/center.html") def center():# 响应状态status = " ...

h5-localStorage实现缓存ajax请求数据

h5-localStorage实现缓存ajax请求数据相关推荐

最新文章

热门文章