如何在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);
});

这不能按预期工作。 有时确实如此，但是代码中存在范围界定问题。 我有什么办法可以实际上伪造整个请求？ 这样回调机制就可以继续进行。 就像是

请求=>挂接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));

Answer 2

也许我错了，但是如果我命中了缓存，我什至不会启动ajax调用。 这就是我通常使用缓存的方式，我认为您可以使其适应使用本地存储而不是缓存对象。

var cache = {};
var complete = function(data) {};

$("input").change(function(){
    var val = this.value;

    // key exists in cache-object, use it!
    if (cache[val]) return complete(cache[val]);

    // key doesn't exist yet, get the data an store it in cache.
    $.get(url, function(response){
          cache[val] = response;
          complete(response);
     });
});