使用背景:要实现每次鼠标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. javascript 捕获异常方法

    捕获异常的实例: var str="fasdfsadfsad$$异常信息$$你看不到我"; var arr=str.split("$$"); arr[1]; 通 ...

  2. Android实现蓝牙耳机连接

    代码地址如下:http://www.demodashi.com/demo/13259.html 前言 讲讲android对于蓝牙耳机连接技术的实现 今天涉及的内容有: 流程讲解 新建广播Bluetoo ...

  3. Google Chrome 浏览器的检索语言设置

    解决为何从一开始安装Google Chrome 浏览器的时候,使用Google 搜索,结果都是日文的问题. 藏的比较隐蔽,没法在“设置”那里修改. 1.问题:搜索内容均是日文: 2.注意到右边有一个“ ...

  4. HttpClient POST 的 UTF-8 编码问题

    http://www.360doc.com/content/09/0915/15/61497_6003890.shtml不 过在实际使用中, 还是发现按照最基本的方式调用 HttpClient 时, ...

  5. Atitit.编程语言and 自然语言的比较and 编程语言未来的发展

    Atitit.编程语言and 自然语言的比较and 编程语言未来的发展 1. 单词的间隔靠空格,编程的单词的间隔靠分界符..1 2. 语句分界符:自然语言使用逗号,编程语言使用分号1 3. 换行1 4 ...

  6. seo-mask -- 为单页应用创建一个适合蜘蛛爬取的seo网站

    seo-mask seo-mask是利用搜索引擎蜘蛛的爬取原理(蜘蛛只会爬取网页的内容,并不会关心解析网页里的css和js),制作一套专门针对seo的镜像网站,鄙人称它为针对seo的mask,让蜘蛛看 ...

  7. PILE读书笔记_基础知识

    程序的构成 Linux下二进制可执行程序的格式一般为ELF格式. 我们可以用readelf命令来读取二进制的信息. ELF文件的主要内容就是由各个section及symbol表组成的. 下面来分别介绍 ...

  8. java - day11 - OverRideTest

    概念 1.重写:看调用方法的对象:如果调用的是子类对象,则无论父类/子类引用类型,调用的都是重写后的方法,如果想调用父类的方法,用super.方法 来调:如果调用的是父类对象,则调用的是父类重写前的方 ...

  9. hadoop_百科

    一.发音是:[hædu:p]. 二.简介:Hadoop是一个由Apache基金会所开发的分布式系统基础架构.用户可以在不了解分布式底层细节的情况下,开发分布式程序.充分利用集群的威力进行高速运算和存储 ...

  10. mysql命令 SHOW TABLE STATUS LIKE '%city%'; 查看表的状态可以查看表的创建时间

    show status like '%handler_read_key%'; #走索引的命令的数量. #查看存储引擎 mysql> show variables like '%engine%'; ...