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)!
You may be able to have the browser cache the file normally, 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 an ajax call, specifically for json. You should try setting it to true, which would let the browser cache normally.

Putting it in a cookie can work as well, but has a max size of 4kb. I'm assuming your json isn't nearly that large though.