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

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

请求 => Hook Ajax 调用（停止调用，设置响应） => 继续 ajax

Answer 1

另一个选项是覆盖$.ajax 方法。你可以try out my fiddle。在内部，$.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);
     });
});