I am building a simple blog which is viewed single-page (do not worry, it is progressively built) and thus I am sending AJAX requests which return HTML to be inserted into the page.
What is the most efficient way to store/cache information (HTML) to be added at a later time into the DOM?
How much information (old entries which the user may return to) dare I save client side using JavaScript considering that they contain HTML for an entire article? Maybe I do not have to save them with JavaScript if I somehow make sure the clients browser cache the AJAX application’s state (e.g. getHTML.php?article=4) so that it returns the HTML without really sending an AJAX request (after it has already been requested once)?
Thanks in advance,
Willem
I would recommend that you cache them somewhere inside the DOM itself, either at their natural place or in a ‘cache’
div, just hide them or their container (visibility: hidden). Move them around the DOM (e.g.final_container.appendChild(cache.removeChild(cached_item))) and show them as required. This should give you the best bang for the buck in terms of memory efficiency, speed and simplicity when dealing with moderate amounts of cached information.With the proper cache directives inside your AJAX replies’ headers, the browser might also perform caching for your AJAX replies just like for regular pages.
Check out this Browser-Side Cache article for ideas, too.