如何在JQuery中使用localStorage为ajax调用创建自定义缓存机制？

Question

我试图为我的ajax调用编写自定义缓存机制,这些调用主要是数据调用.所以我没有将它们放在浏览器缓存中,而是将它们放在localStorage中以供长期使用.

但我无法弄清楚如何伪造JQuery.ajax的请求完成.我可以成功拦截调用,但由于某种原因,我对回调函数的调用没有相同的范围.

$.ajaxPrefilter(
 function( options, originalOptions, jqXHR ) {
  var key;
  originalOptions.data = originalOptions.data || {};
  key = options.localStorageKey = options.url + '?' + $.param(originalOptions.data);
  var value = localStorage.getItem(key);
  if(value)
  {
     //Still not working
    jqXHR.abort();//Abort this call
    options.success(JSON.parse(value));//Call the callback function
    return jqXHR();//return xhr for chaining (?)
  }
});

$('#logo').ajaxComplete(function(e,xhr,settings) {
//cache the request
  localStorage.setItem(settings.localStorageKey,xhr.responseText);
});

这不符合预期.有时它确实如此,但代码中存在范围问题.我有什么方法可以伪造整个请求吗？这样回调机制就像它一样继续.就像是

Request => Hook Ajax调用(停止调用,设置响应)=>继续ajax

Answer 1

另一种选择是覆盖该$.ajax方法.你可以尝试我的小提琴.在内部,$.ajax用于方法load,get和post.

(function($){
    // Store a reference to the original ajax method.
    var originalAjaxMethod = $.ajax;

    // Define overriding method.
    $.ajax = function(options){
        var key = '';
        if(options.url)
            key += options.url;
        if(options.data)
            key += '?' + options.data;

        // has made this request
        if(!!window.localStorage && (key in localStorage)) {

            // todo: determine which callbacks to invoke
            var cb = options.complete || options.success;
            cb.call(this, localStorage[key]);

        } else { // has not made this request

            // todo: determine which callbacks to intercept
            var cb = options.success;
            options.success = function(responseText){
                localStorage[key] = responseText;
                cb.apply(this, arguments);
            };

            originalAjaxMethod.call( this, options );

        }
    };
}(jQuery));