JQuery.getJSON: how to avoid json file request with every update? (Caching)

Question

in this example, you can see the generated HTML list. With each update, the script requests a data file (ajax / test.json) and again creates a list.

The generated file "ajax / test.json" is statically cached. But how can I avoid requesting this file with every update?

// source: jquery.com $.getJSON('ajax/test.json', function(data) { var items = []; $.each(data, function(key, val) { items.push('<li id="' + key + '">' + val + '</li>'); }); $('<ul/>', { 'class': 'my-new-list', html: items. }).appendTo('body'); }); 

This one does not work :

 list_data = $.cookie("list_data"); if (list_data == undefined || list_data == "") { $.getJSON('ajax/test.json', function(data) { list_data = data; }); } var items = []; $.each(data, function(key, val) { items.push('<li id="' + key + '">' + val + '</li>'); }); $('<ul/>', { 'class': 'my-new-list', html: items. }).appendTo('body'); 

Thanks in advance!

Answer 1

How is the promise?

 var list_data = localStorage.getItem("list_data"), def = $.Deferred(); if (!list_data) { def = $.getJSON('ajax/test.json', function(data) { list_data = data; localStorage.setItem("list_data", JSON.stringify(list_data)); }); }else{ list_data = JSON.parse(list_data); def.resolve(); } def.done(function() { var items = []; $.each(list_data, function(key, val) { items.push( $('<li />', {id: key, text: val}) ); }); $('<ul/>', {'class': 'my-new-list'}).html(items).appendTo('body'); });​ 

I would also use local storage, and if IE7 or lower would be supported, use a padding available on MDN !

Answer 2

Because your code goes through data , which is not in the area where your $.each . Instead of this:

 list_data = $.cookie("list_data"); function buildList(data) { var items = []; $.each(data, function(key, val) { items.push('<li id="' + key + '">' + val + '</li>'); }); $('<ul/>', { 'class': 'my-new-list', html: items. }).appendTo('body'); } //if we dont have list data if (!list_data) { //request for the data $.getJSON('ajax/test.json', function(data) { list_data = data; //build list using new data buildList(data); }); } else { //or use existing list data buildList(list_data) } 

Answer 3

Please note that if you stay on one page, you do not need a cookie - it can simply copy it to an object somewhere:

 window.list_data = data; 

If you need to receive data later or after updating the page, use a cookie. But you need to serialize it because it is not possible to save the object in a cookie:

 // retrieve list_data = $.cookie("list_data"); if (list_data) { // have to de-serialize from string to object list_data = JSON.parse(list_data); } else { // doesn't exist in cookie, make AJAX call } // save $.cookie("list_data", JSON.stringify(data)); 

Answer 4

Perhaps you have a browser cache file, see jQuery ajax docs:

http://api.jquery.com/jQuery.ajax/

 jQuery.ajax( settings ) cache Boolean Default: true, false for dataType 'script' and 'jsonp' If set to false, it will force requested pages not to be cached by the browser. Setting cache to false also appends a query string parameter, "_=[TIMESTAMP]", to the URL. 

If I understand correctly, getJson is just an abstraction of ajax call, especially for json. You should try setting it to true, which will enable the browser cache normally.

Including it in a cookie may also work, but has a maximum size of 4 KB. I assume your json is not that big.

Answer 5

I did some research on my own, and it seems possible to use localStorage or the sessionStorage object in modern browsers at the moment to store objects for a specific time. Both are limited. Typically, the localStorage and sessionStorage objects have 5 MB limits. Data is stored throughout the life of the window / tab. Support is not so bad ( currently 89% ) of browsers today.

Both sessionStorage and localStorage use the same API. Therefore, the choice of data storage location locally depends on your use case.

Usage example

 if (!sessionStorage.myapp) { var xhr = new XMLHttpRequest(), results = {}; // Results of xhr request // ... // store your xhr results to sessionStorage. // Both sessionStorage and localStorage can only store strings. sessionStorage.setItem('myapp', JSON.stringify(results)); } 

I would also avoid using cookies because of their size limits (4K), and also because cookies are sent back to the server after each transaction.

Sitepoint is a really good resource for the existing existing web storage API: http://www.sitepoint.com/an-overview-of-the-web-storage-api/