Where are JavaScript variables cache? Is there a way to cache manually more effectively?

Question

Now Before I go on, this is more something that has my curiosity. I love tinkering and even if its not the "smartest" thing in web standards it can be fun to do as an experiment.

Right now I am trying to see if I can serve image in base64 through a web socket from mongodb (crazy I know). Overall the speed to GET the image is much much faster, however the browser will never cache it as it is not a static resource.

The app I am making does not have to deal with reloads, and I am fine with the content having to be re-downloaded if there is a refresh.

So It makes me wonder where JavaScript saves variables, I would assume in memory, but if that is the case 20+ base64 images in memory is over the top to force the client to deal with. Is it in disk? I am not sure where to look to get that answer so that's why I am here. Kinda doubt its in disk but it would make sense to make sure that the browser does not over use memory.

There is also application cache, that could be very useful but only if I can store strings in it.

localStorage is perfect but the 10mb limit pretty much eliminates it.

Overall I would like to see if there is a good way to safely cache from JavaScript for manually created static resources.

This question was marked as unclear, the above sentance summarizes it. I hope that helps some people, if not here is it rephrased.

Browsers cache naturally based on http requests, is there a way to cache long strings like base64 images on the clients computer safely, even if it means the latest and "unstable" html5/javascript methods.

Hope that clears it up for the people who were confused.

Answer 1

As I pointed out in a comment before the question was reopened I would advice the use of idb.filesystem.js, which has the advantage that after reloads you could still cache the files. So you would need to build some E-TAG/last modified system as well. The only disadvantage here is that you need indexedDB support which is slightly limited (especially IE9- missing).

Alternatively you could 'trust' the browser to the caching per session as well. Modern browsers should do a reasonable job, but then you would have to re-retrieve it every time somebody opens the application in question.

And just to be clear, using localStorage is not a good idea and not meant to be used for such behavior. Also note that localStorage loads all variables into memory the moment your site is opened which is also why there's a limit to it's storage.