项目:jquery-ajax-cache

  地址:https://github.com/WQTeam/jquery-ajax-cache

     

  最近在项目中用到了本地缓存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都挺有兴趣,所以此开源项目都有用到。

5、关于jquery-ajax-cache

  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小时
}
});

由于个人能力有限,难免有bug,可以反映到https://github.com/WQTeam/jquery-ajax-cache/issues

[开源]jquery-ajax-cache:快速优化页面ajax请求,使用localStorage缓存请求的更多相关文章

  1. [原创]jQuery的this和$(this)

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

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

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

  3. python 全栈开发,Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)

    昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...

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

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

  5. jquery ajax cache的问题

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

  6. [干货]2017已来,最全面试总结——这些Android面试题你一定需要

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

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

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

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

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

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

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

随机推荐

  1. OFFSET & FETCH

    OFFSET & FECTH 关键字与ORDER BY结合使用,实现对查询结果的分页 一.单独使用OFFSET: 示例:查询所有职员的信息,按雇佣日期排序并跳过前285条记录(共290条) U ...

  2. ubuntu 100M 到 10M

    浅析ubuntu下如何修改网卡网速--将100M网卡改为10M网卡 公司的路由器可能比较陈旧,机器启动之后,默认网卡是100M的,但是登录QQ经常出现掉线现象,后来得知原来需要将100M网卡降频到10 ...

  3. C# 实现关闭按钮隐藏窗体而不退出

    private void OpenNewMxdFrm_FormClosing(object sender, FormClosingEventArgs e) { e.Cancel = true; thi ...

  4. Codeforces Round #363 (Div. 2) 698B Fix a Tree

    D. Fix a Tree time limit per test 2 seconds memory limit per test 256 megabytes     A tree is an und ...

  5. SQL-LINQ-Lambda语法对照

    SQL LINQ Lambda SELECT *FROM HumanResources.Employee from e in Employees select e Employees .Select ...

  6. mysql in查询 结果乱序 引发的思考

    Mysql in查询 结果集 乱序 SQL: select * from table where id IN (3,6,9,1,2,5,8,7); 这样的情况取出来后,其实,id还是按1,2,3,4, ...

  7. 【题解】警位安排( 树形 DP)

    [题目描述]一个重要的基地被分成了 n 个连通的区域 , 出于某种原因 , 这个基地以某一个区域为核心,呈一树形分布.在每个区域里安排警卫的费用是不同的,而每个区域的警卫都可以望见其相邻的区域 .如果 ...

  8. c#委托和事件(下) 分类: C# 2015-03-09 08:42 211人阅读 评论(0) 收藏

    C#中的委托和事件(下) 引言 如果你看过了 C#中的委托和事件 一文,我想你对委托和事件已经有了一个基本的认识.但那些远不是委托和事件的全部内容,还有很多的地方没有涉及.本文将讨论委托和事件一些更为 ...

  9. 【机房重构】SQL之视图

    近期在重构机房收费系统,越往后就会越感觉到这里很多其它的是对之前学过知识(数据库,设计模式)的一种应用和回想.比方在登录功能中用到了抽象加反射,在学生下机中,我们能够用触发器来同一时候更新两个表.这里 ...

  10. [转] Linux抓包工具tcpdump详解

    http://www.ha97.com/4550.html PS:tcpdump是一个用于截取网络分组,并输出分组内容的工具,简单说就是数据包抓包工具.tcpdump凭借强大的功能和灵活的截取策略,使 ...