5

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.

Improve this question
5
  • 2
    Javascript does not cache variables. While your code is running, variables are stored in memory. Commented Dec 15, 2013 at 3:47
  • 1
    there used to be some IE only hack that did this. There are also options that depend on the consistency of your users systems. Do you know anything about the latter? Commented Dec 15, 2013 at 3:49
  • I will look into the users systems thing, even if it means checks for different systems it would be worth looking into. Commented Dec 15, 2013 at 3:58
  • Totally blown away that it was marked as unclear. Updated question in hopes that it is more clear, I apologize to anyone that was confused by it. I feel it is a very needed resource as with newer methods this situation may arise far more often. Commented Dec 19, 2013 at 8:15
  • 1
    You're wording it quite poorly, but either way, what you want to use is indexedDB or the HTML5 filesystem API. Concretedly I would advice you to use github.com/ebidel/idb.filesystem.js which is a polyfill for the filesystem API. Commented Dec 19, 2013 at 8:32

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

This seems perfect! it may require a bit of work bit goes above and beyond what I was hoping for. I looked into the filesystem api before but I never realized it could go that far. In the case of my application having more direct control can really help.
0

Maybe you can store a blob url in the session storage, but I'm not sure if a blob url is destroyed at the document unload or at the end of the session (there seems to be a difference between the W3C standard and what the browsers really do).

Improve this answer

Comments

0

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.

Keep in mind that most modern consumer-oriented OS use some form of virtual memory like a swap partition or page file to store things in when memory runs low. If things won't fit in physical memory, they get shuffled off to the disk.

In other words, if you only need these "cached" images to last for the duration of one page view, you can pretty much leave them in JavaScript variables and not worry about it.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.