Jquery Caching Ajax XMLHttpResponse using Local Storage

问题

I have a Jquery web site that needed to be upgraded to provide Local Storage caching capability, Target was making every Ajax request checks first if there is a cached response HTML, then it will NOT call the server side, but gets data from cache instead. Everything going OK with caching and displaying data from cache and so on..

My problem appeared when applying my caching core to sites that heavily depending on XML HTTP Response Headers; It Appeared that when I try to cache the XMLHttpResponse object returned from ajax call after serializing it of course using JSON.Stringify(), the desearialized object returned from JSON.Parse() DOESN'T CONTAIN RESPONSE HEADERS!

I have to return an XMLHttpResponse object from cache containing all previously added headers, since all sites are dealing with it as an object of XMLHttpResponse.

Any Ideas?

回答1:

I found a work around for this...

Since All Sites need an XMLHttpResponse object to deal with, I built something like a Custom XMLHttpResponse class, this class contains all variables/functions being used in those sites, like the below example:

var CustomXMLHTTPResponse =
{
    ResponseHeadersArr: new Array(),

    getResponseHeader: function (Key) {
        return this.ResponseHeadersArr[Key];
    }
.
.
}

And instead of caching the whole object, I only cache what I need from the original XMLHttpResponse object, actually I cache All Response Headers in this case; And when I get this data from cache, I build a new CustomXMLHTTPResponse object, then fill it with data gotten from cache, and finally I pass the CustomXMLHTTPResponse object.

So, When function getResponseHeader() in CustomXMLHTTPResponse class being called, it would act the same as getResponseHeader() in the original XMLHTTPResponse class.

来源：https://stackoverflow.com/questions/12881225/jquery-caching-ajax-xmlhttpresponse-using-local-storage