如何优化ajax缓存,［开源］jquery-ajax-cache：快速优化页面ajax请求，使用localStorage缓存请求...

   

最近在项目中用到了本地缓存localStorage做数据的缓存。

1、简单说下localStorage

localStorage和cookies相比，在浏览器中存储的容量更大。另外最大的特点是不会附带在http请求中传给后台，不会像cookies一样导致http头部变大影响传输性能。基于这个原因，localStorage适合缓存一些常用的数据，无需平凡的像后台请求数据。

localStorage的API非常简单 参考

常用的两个方法 setItem 和 getItem

localStorage.setItem(key, value);

locaStorage.getItem(key); // return value

由于存储的内容都是 string 类型。当需要存入js 对象时。需要先把js 对象转为string。方法也很简单JSON.stringify，取出时对应的使用JSON.parse

2、项目中该如何使用localStorage

localStorage 作为一种前端的存储方式和后台的数据库相比，最大的不同是这种储存是一种不可靠的存储。用户可以随时清除浏览器缓存，另外一些浏览器的无痕浏览模式会禁用localStorage。所以localStorage最好只是用为性能优化的缓存，而不是数据的持久化。但作为缓存localStorage又太过简单，无法设置超时时间，另一个项目有为此做了扩展：web-storage-cache   。

3、实际运用中有没有更好的方式

项目中做性能优化，我们都希望优化的方式是不影响原有代码、不增加新的代码逻辑。

假设业务场景中有某段数据是被多个地方用到的，最直观的做法是：

var data = localStorage.getItem('cacheKey');

if (!data) { // 如果data为空，发出请求

$.ajax({

url: 'xxxx',

success: function(response) {

if(response.code === 1) { // success!

loccalStorage.setItem('cacheKey', response.data);

}

// 其他业务处理。。。

}

})

}

如果接口设计是统一的，可以统一封装自己的ajax方法，拦截请求

function myAjax() {

var arg = arguments[0];

var realSuccess = arg.success;

var realBeforeSend = arg.beforeSend;

arg.success = function(response) {

if(response.code === 1) {

localStorage.setItem(cacheKey /*需要根据请求参数生成不一样的key*/ , response.data);

}

realSuccess && realSuccess.apply(null, arguments);

}

$.ajax(arg);

}

如上面代码，同理可以增加beforeSend拦截请求判断是否在缓存中读取。这样业务逻辑就更少的受到影响。

4、jQuery本身支持ajax方法的扩展

上面是大多人采用的方式，但事实上jQuery对ajax提供了更好的扩展方式。通过$.ajaxPrefilter 和 $.ajaxTransport这两个方法可以更好的做拦截。jquery-ajax-cache插件中使用的也是这种方式。

本人对刚刚定为标准的ES2015 和 webpack都挺有兴趣，所以此开源项目都有用到。

jquery-ajax-cache 插件扩展了jQuery的$.ajax，提供非常便利的方式缓存ajax请求到‘localStorage’或‘sessionStorage’中。你唯一要做的就是实现cacheValidate方法，验证返回结果是否需要缓存。页面加载和数据读写过程插件都会进行过期数据清除，避免过期数据的堆积。同时你也可以调用$ajaxCache.deleteAllExpires()手动清除过期缓存。

全局配置

$ajaxCache.config({

// 业务逻辑判断请求是否缓存， res为ajax返回结果, options 为 $.ajax 的参数

cacheValidate: function (res, options) { //选填，配置全局的验证是否需要进行缓存的方法,“全局配置” 和 ”自定义“，至少有一处实现cacheValidate方法

return res.state === 'ok';

},

storageType: 'localStorage', //选填，‘localStorage’ or 'sessionStorage', 默认‘localStorage’

timeout: 60 * 60, //选填， 单位秒。默认1小时

});

简单实用

$.ajax({

// 使用时 只要增加给ajax请求增加一行属性 ajaxCache: true

ajaxCache: true // “全局配置” 和 ”自定义“，至少有一处实现cacheValidate方法

/*

others...

*/

});

自定义

$.ajax(

// 此处的参数会覆盖‘全局配置’中的设置

ajaxCache: {

// 业务逻辑判断请求是否缓存， res为ajax返回结果, options 为 $.ajax 的参数

cacheValidate: function (res, options) { //选填，配置全局的验证是否需要进行缓存的方法, “全局配置” 和 ”自定义“，至少有一处实现cacheValidate方法

return res.state === 'ok' && res.code ==='200';

},

storageType: 'localStorage', //选填，‘localStorage’ or 'sessionStorage', 默认‘localStorage’

timeout: 60 * 60, //选填， 单位秒。默认1小时

}

});

［原创］jQuery的this和$(this)

网上有很多关于jQuery的this和$(this)的介绍,大多数只是理清了this和$(this)的指向,其实它是有应用场所的,不能一概而论在jQuery调用成员函数时,this就是指向dom对象. ...

使用jquery的trigger方法优化页面代码

我们做页面级联的时候经常会用到ajax处理数据,会为下拉菜单编写change事件. //城市和区域联动 $("#City").change(function () { var ci ...

Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件

一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...

jquery ajax cache的问题

function test()        {            $.ajax({                type:'GET',                url:"tt. ...

［干货］2017已来，最全面试总结——这些Android面试题你一定需要

地址.http://blog.csdn.net/xhmj12/article/details/54730883 相关阅读: 吊炸天!74款APP完整源码! [干货精品,值得收藏]超全的一线互联 ...

Jquery学习笔记--性能优化建议

一.选择器性能优化建议 1. 总是从#id选择器来继承 这是jQuery选择器的一条黄金法则.jQuery选择一个元素最快的方法就是用ID来选择了. 1 $('#content').hide(); 或 ...

jQuery源码分析系列(33) : AJAX中的前置过滤器和请求分发器

jQuery1.5以后,AJAX模块提供了三个新的方法用于管理.扩展AJAX请求,分别是: 1.前置过滤器 jQuery. ajaxPrefilter 2.请求分发器 jQuery. ajaxTran ...

jQuery源码分析系列(34) : Ajax - 预处理jsonp

上一章大概讲了前置过滤器和请求分发器的作用,这一章主要是具体分析每种对应的处理方式 $.ajax()调用不同类型的响应,被传递到成功处理函数之前,会经过不同种类的预处理(prefilters). 预处 ...

随机推荐

node.js cluster多进程、负载均衡和平滑重启

1 cluster多进程 cluster经过好几代的发展,现在已经比较好使了.利用cluster,可以自动完成子进程worker分配request的事情,就不再需要自己写代码在master进程中rob ...

VMware虚拟机中Hadoop服务的端口无法访问的问题

今天安装了一个hadoop集群,因为已经在单个虚拟机上安装成功,所以初期安装相对顺利. 初始环境如下:       通过Vmware Esxi服务器虚拟机出来四台机器,每台机器的网络配置如下:     ...

回某位朋友问题备受phpcgi.exe煎熬现在cpu跑满(解决方案)

(本文原创,但是cgi参数参考一个大神写的针对小服务器的,希望大家积极投票哦) 下面是对php-cgi.ext过多引起服务器cup%的解决方法,希望对大家有帮助;大多数情况是发生在第四项上;   解决 ...

Gray码 (格雷码) 【二进制】

以下内容是看了Matrix67的关于二进制的blog(Link)的一点总结与摘录. Gray码,中文“格雷码”,是一种特殊的编码,相邻两个格雷码的二进制表示中有且仅有一位不同,且 n 阶 Gray 码 ...

HTML5学习笔记<二>:元素,属性,格式化

HTML元素 元素是指从开始标签到结束标签的所有代码. 开始(开放)标签 元素内容 结束(闭合)标签

this is my web page

没有内容的 HT ...

UVW代码漫谈(一)

博客园是个非常好的学习知识的地方,相信有很多人跟我一样,园龄3年,从博客园不知道拷了多少代码,看了多少博客,自己却一篇博客都没写过.真是罪过. 这次准备写几篇关于这个项目源码的阅读和理解的文章,大家一 ...

java Int 和 String 之间的转换

String 转换成 int Integer.parseInt(formParams.get("id")) int 转换成 string Integer.toString(id);

nginx 深入篇

nginx 防盗链 上文介绍了如何以最最简单的方式配置静态资源,还存在一定的隐患,一般的盗链如何预防, 设置验证referer server { listen 8000; server_name 12 ...

分布式系统的一致性算法------《Designing Data-Intensive Applications》读书笔记13

一致性算法是分布式系统中最重要的问题之一.表面上看,这似乎很简单,只是让几个节点在某些方面达成一致.在本篇之中,会带大家完整的梳理分布式系统之中的共识算法,来更加深刻的理解分布式系统的设计. 1.原子 ...

Cooperation.GTST团队第三周项目总结

项目进展 这周我们仍然在学习使用博客园的相关接口,页面的一个基本模块已经搭建出来了,但是页面整体效果还没有完全做出来.另外,我们在使用其他的APP时留意到许多APP都使用上拉加载和下拉刷新的效果,所以 ...