Is it possible to do client-side page/DOM caching with localStorage?

I'm reading up on Local Storage in HTML5, and I'm starting to view it sort of like a client-side version of how I use memcached. That got me thinking -- I currently do page-level caching in memcache.

Is that possible with localStorage? That is, can an assembled page store itself (or, more importantly, maybe parts of itself) in localStorage such that the client doesn't have to work its 开发者_开发技巧DOM so hard next time the user shows up to a page?

It seems to me that since things are only stored as strings this may not work unless there is some string to object transformation available.

Have a look at Christian's 2010 24ways post under the heading Caching a full interface (near the end). He basically does:

localStorage.setItem('state',f.innerHTML);

Followed by:

if('state' in localStorage){
    f.innerHTML = localStorage.getItem('state');
}

Where f is the element he wants to cache.

The problem with this is that you don't know what's in the cache until you've loaded your page, meaning that you'd need to perform another HTTP request to get the data that you do need which leads to even more overhead. I would definitely stick with the server-side caching of resources.

You could do it, but something like this would basically involve a single, master index page of Javascript that either loaded cached local files or performed Ajax requests to load content from the server.