标签：
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
