Как создать собственный механизм кэширования для вызовов ajax, используя localStorage в JQuery?

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);
     });
});