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

　　地址：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缓存请求

最新文章

热门文章