sanemethod / jquery-ajax-localstorage-cache Goto Github PK

via @rpflorence

TRUE

; (function($, window, undefined) {

Something like this is recommended. I am not submitting as a PR, until I know you're okay with this.

Hi,
thanks for this cool extension for $.ajax :)

But it doesnt work with dataType: "xml"
I get the following error:

Uncaught Error: Syntax error, unrecognized expression: [object XMLDocument]

Greetings

Edit
Does work if i use dataType: "html" and parse xml using $.parseXML(respond) afterwards
Maybe just add this to Notes :)

Didn't have lots of time to investigate, but when using jQuery 1.11.3, genCacheKey() generates different keys when storing and getting the cached object and plugin doesn't work correctly.
That could be because of options.url difference in the function, in one place it looks like pure url, in other like url + params already.

Anyway thanks for your great work!

I haven't touched this project in years. If anyone wants to take on ownership, please email me.

Otherwise, you should probably avoid it. :)

jQuery.ajax() API allows for an array of success functions to be specified:

As of jQuery 1.5, the success setting can accept an array of functions. Each function will be called in turn.

The following line is incompatible with this:

if ( options.realsuccess ) options.realsuccess( data );

Hello

It would be much better if you could build a plugin for wordpress.

In wordpress, it is really a a headache to handle jquery.js when optimize the sites to improve faster speed for mobile mode, since there will lots of issue if make jquery.js deferred loading, but if not, the page loading speed will be slower, that might the reason why also google pagespeed insight suggest make it deferred loading

Maybe set jquery.js to be cached would be a good way to speed up page loading.

Thanks.

Alex

Hi,

I am getting this error after ajax call.

Code :
$(function(){
$.ajax({
url : 'https://api.myjson.com/bins/wmg5',
localCache : true, // Required. Either a boolean, in which case localStorage will be used, or an object that implements the Storage interface.

    cacheTTL     : 1,           // Optional. In hours.
    cacheKey     : 'POST',      // optional.
    isCacheValid : function(){  // optional.
        return true;
    }
}).done(function(response){
    response.map(function(i,val){
        $('.container').append("<div>"+val.first_name+"</div")
    });
});

});

error :

Please help me to solve the issue.

Thanks

My demo isn't working, maybe no localstorage in iframes ? http://jsfiddle.net/ZFexL/1/

However based on the source, I don't think getting deferred ajax results from the cache will work using jQuery.ajaxPrefilter as it fires asychronously, though I could be wrong...

In order to prevent jQuery from treating this differently in the statusCode property of ajaxSetup I think it might be useful to cache status codes with body.

I'm gonna do this on my own fork then make a pull request. The way I was gonna do it was to put it in a separate localStorage key. If anybody reading this has any thoughts of strong feelings against this, please say so.

When I try to use this with jQuery 1.8.3, I get the following error:

Uncaught TypeError: Object # has no method 'success'

The error is thrown on https://github.com/paulirish/jquery-ajax-localstorage-cache/blob/master/jquery-ajax-localstorage-cache.js#L31

I'd like to request a feature if you have interest on implementing it.

What I'd really like is a plugin that would allow jQuery to automatically cache my responses when Last-Modified or ETag headers are set in the response.

When you set the ifModified option to true in the $.ajax options, jQuery will fill in the if-modified-since header for instance. But the main problem is that it won't cache the result of a request with a Last-Modified header present. That means the next time you make the ajax call, data will be undefined if the server responds with 304 (Not Modified).

If your plugin could automatically detect when Last-Modified or ETag is sent by the server and cache the result so that it is used in 304 responses transparently, then the caching would work seamlessly with no code changes in the sense that the ajax handlers will get the cached data in the arguments instead of undefined.

In the seamless mode, no cache is performed by the plugin unless Last-Modified or ETag is present in the header.

What do you think? Does it make sense?

Yeah yeah, I realize synchronous requests are a anti pattern, but... well, they exist and are allowed by jQuery so... should be supported. I might hack together a solution.

so amplify has something like this

and for fucks sake someone else must have done this exact thing only better already.

i mean srsly.

use ms.js to make the cacheTTL option more flexible: https://gist.github.com/1503944

Hi, I used infinite scroll for a website I did : http://www.gmanetwork.com and I just want to ask how to use jquery-ajax-localstorage-cache plugin? Is it like

localStorage.setItem('CacheKey', newElements);

I'm still new with this, thank you! :)

The default cacheKey generation fails for GET requests because the options url/data pair is mutated between the call to ajaxPrefilter and ajaxTransport.

In ajaxPrefilter():

• options.type = GET
• options.url = /path/to/api/method
• options.data = p1=param1&p2=param2

In ajaxTransport():

• options.type = GET
• options.url = /path/to/api/method?p1=param1&p2=param2&_=1489431445387
• options.data = undefined

So the default cacheKey of (url + type + data) yields:
ajaxPrefilter => /path/to/api/methodGETp1=param1&p2=param2
ajaxTransport => /path/to/api/method?p1=param1&p2=param2GET

This cacheKey function works nicely for both GET and POST requests.
return options.type + url + (options.data ? '?' + options.data : '');

Is it possible to use this with the done callback insted of the success one?

The fix is pretty trivial with a regex in genCacheKey(). The issue is because the timestamp is tacked on afterwards, so isn't present in the url the first time around.

    var genCacheKey = function (options) {
        var url = options.url.replace(/jQuery.*/, '');

        // Strip _={timestamp}, if cache is set to false
        if (options.cache === false) {
            url = url.replace(/\??_=\d{13}/, '');
        }

        return options.cacheKey || url + options.type + (options.data || '');
    };

There has been a new Drupal core security update released and when building our drupal site using drush make the module fails to clone this repo.

Unable to clone jquery-ajax-localstorage-cache from
[error]
[email protected]:SaneMethod/jquery-ajax-localstorage-cache.git.

We have the module added to our profile.make file and the correct github link to clone from but the drush make command errors when trying to clone this repo.

Any help with this would be great

josh

I am using it for a hybrid desktop app and sometimes the client is offline. AJAX fails and the cache is cleared. It would be great to have an option to keep the earlier contents till a successful fetch happens.

; (function () ...

As assurance that if files are concatenated that no error occurs due to poor coding standards

I got an error:
Uncaught TypeError: Cannot read property 'toLowerCase' of null
on this line:
if (dataType.toLowerCase().indexOf('json') !== -1) strdata = JSON.stringify(data);

This happens when both dataType and the content response headers are empty. (I do see though, a returned this.dataTypes array)

Perhaps directly check the type of data to know to stringify objects?
Or circumvent with a quick error check:
dataType && dataType.toLowerCase().indexOf('json') ...

Simple error check doesn't prevent possibly storing unstringified data.

I see there is a fork already submitted. Though this is old and out dated than yours. So perhaps it's worth adding?

If the user includes the function on each page, but doesn't require each ajax request to be 'cached', then more than likely they will not include localCache in the ajax options. Therefore a check for undefined should perhaps be done before anything else.

Instead of ...

if (!storage) return;

use this...

// Check if the storage is not an instance of storage
if ((storage instanceof Storage) === false) {
    return;
}

PS Awesome you took over the project.