Javascript - is it possible to cache inner html of a element so that after page refresh I can render cached element?

Question

I am looking for a possibility to cache (client side) part of my page - is it possible to do it with javascript/jquery? If so, is there any limit of that cache? I mean, what if I wanted to cache tons of data? How can I access this cache after page refreshes, so I can re-render it?

Answer 1

The images and CSS will be automatically cached. You can not cache a particular DOM part to be used when page refreshes. You can use local storage. It stores data in key-value pairs. Please go through link provided by Derek to see how you can set data in local storage and use it when page loads the next time.

Simple algo can be

check if data is there in local storage
yes - use it
no - get from server, save it in local storage and use it.