码迷,mamicode.com
首页 > Web开发 > 详细

[开源] jQuery 插件,利用‘localStorage’ 对 jQuery AJAX进行缓存,优化页面ajax请求

时间:2015-12-17 12:43:12      阅读:767      评论:0      收藏:0      [点我收藏+]

标签:

jquery-ajax-cache

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

技术分享


jQuery插件——利用‘localStorage’ 和 ‘sessionStorage’ 对 jQuery AJAX 请求进行缓存。

      首先说明下在什么场景下需要用到缓存ajax请求到localstorage中。都知道浏览器本身对http请求就是有缓存策略的,但是这种缓存方式两个缺陷:1、只能缓存get请求 2、同时缓存的设置都在后端响应的报文头部指定。(PS:现在的很多业务代码逻辑是集中在前端,这样久照成了前端开发很难使用这种方式做缓存)


     现在的智能手机都是支持H5,没有需要考虑老旧IE的兼容问题。移动端网站开发都能使用到这种方式,对ajax请求进行缓存,优化用户体验。


用法简单,如下

 

$ajaxCache.config({
    // 业务逻辑判断请求是否缓存, res为ajax返回结果
    cacheValidate: function (res) {    //选填,配置全局的验证是否需要进行缓存的方法,“全局配置” 和 ”自定义“,至少有一处实现cacheValidate方法
        return res.state === ‘ok‘;
    },
    storageType: ‘localStorage‘, //选填,‘localStorage’ or ‘sessionStorage‘, 默认‘localStorage’
    timeout: 60 * 60, //选填, 单位秒。默认1小时
});

$.ajax({
    // 使用时 只要增加给ajax请求增加一行属性   ajaxCache: true
    ajaxCache: true     // “全局配置” 和 ”自定义“,至少有一处实现cacheValidate方法
    /*
     others...
    */
});

 

 

下载

下载 最新 jquery-ajax-cache

bower

bower install jquery-ajax-cache

npm

npm install jquery-ajax-cache --save-dev

引入

<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src=‘../dist/jquery-ajax-cache.js‘></script>

使用

全局配置

$ajaxCache.config({
    // 业务逻辑判断请求是否缓存, res为ajax返回结果
    cacheValidate: function (res) {    //选填,配置全局的验证是否需要进行缓存的方法,“全局配置” 和 ”自定义“,至少有一处实现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返回结果
        cacheValidate: function (res) { //选填,配置全局的验证是否需要进行缓存的方法, “全局配置” 和 ”自定义“,至少有一处实现cacheValidate方法
            return res.state === ‘ok‘ && res.code ===‘200‘;
        },
        storageType: ‘localStorage‘, //选填,‘localStorage’ or ‘sessionStorage‘, 默认‘localStorage’
        timeout: 60 * 60, //选填, 单位秒。默认1小时
    }
});

 

[开源] jQuery 插件,利用‘localStorage’ 对 jQuery AJAX进行缓存,优化页面ajax请求

标签:

原文地址:http://www.cnblogs.com/wuchangming/p/5053364.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!