Question: in this example you can see a generated HTML-list. On every refresh the script requests the data-file (ajax/test.json) and builds the list again. 

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

```
// 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 **doesn't** 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: 
How 'bout a 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'd also just use local storage, and if IE7 or below is to be supported, use the shim available on [**MDN**](https://developer.mozilla.org/en-US/docs/DOM/Storage)!
I did some research myself and it seems that it's feasible to utilize localStorage or the sessionStorage object in Modern Browsers nowadays to storage objects for a certain amount of time. Both have it's limits. Typically the localStorage and sessionStorage object have limits of 5mb. The data is persistent throughout the lifetime of the window/tab. Support isn't too bad ([currently 89%](http://caniuse.com/namevalue-storage)) of browsers today.

Both sessionStorage and localStorage share the same API. So choosing where to store your data locally just depends on your use case. 

Example of usage
----------------

```
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 passed back to the server after each transaction.

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