Is client / DOM caching possible with localStorage?

Question

I am reading Local Storage in HTML5 and I am starting to view it as a client version as I use memcached. It got me thinking - I'm currently doing page-level caching in memcache.

Is this possible with localStorage? That is, can the assembled page store itself (or, more importantly, maybe parts of itself) in localStorage, so the client does not have to work with the DOM so hard the next time the user displays the page?

It seems to me that since things are only stored as strings, this may not work if there is no string to convert objects to.

Answer 1

The problem is that you don’t know what is in the cache until you load your page, which means that you will need to execute another HTTP request to get the data you need, which will lead to even more overhead. I would definitely stick to server side resource caching.

You could do it, but something like this would basically include one main Javascript index page that loaded cached local files or executed Ajax requests to download content from the server.

Answer 2

See the Christian 2010 24ways post under the heading Caching the full interface (near the end). He basically does:

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

The following are:

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

Where f is the element that he wants to cache.