Cache html .load results for quicker loading

I was wondering how do I cache results from the .load function in javascrip开发者_开发百科t, I'm loading a html file like the one below, what I want to be able to do is load the cache by Parent-ID then when each child-ID is called it doesn't have to reload the html file everytime.

<div id="provider1">

    <div id="thumb1">
content1
    </div>
    <div id="thumb2">
content2
    </div>
    <div id="thumb3">
content3
    </div>
</div>

And the javascript I've been using:

var titleID = $(this).attr('id');
$('#content').prepend('<div id="loading">load</div>')
.load('test.html #'+ titleID')          

Thanks a lot

$.ajaxSetup ({
    cache: true
});

var titleID = $(this).attr('id');
$('#content').prepend('<div id="loading">load</div>')
.load('test.html #'+ titleID')

Rewrite load logic like this:

if (stuff in localStorage) {
// take it from there
} else {
// load
// on complete, put stuff in localStorage
}

Check http://diveintohtml5.ep.io/storage.html. There is also jQuery.data(), you can do some simple caching with it too.