I’m in the middle of migrating the Check-In application for Fresh Vine from Adobe Air into HTML5 wrapped in QT. One of the things that I love about Fresh Vine is how graphical it is, and that so many people add in their profile photos to their accounts.

One of the challenges in making the HTML5 version of the Check-In is to have it work perfectly offline – including these images. They all have unique URLs that come with the profiles when we sync, so that laid out the challenge: How do we store these locally and reference them.

Turns out making a simple jQuery plugin took care of both of those issues. We are able to reference the images by their URL (no second key) and it allows us to re-use them (since we have default images that we don’t want to download/store hundreds of times).

So maybe you’re playing around with HTML5 and want to be able to use remote images in your app, but store them offline into localStorage – then this is for you. Check it out!

http://freshvine.github.io/jQuery-cache-images/

It is pretty much where I want it at. All that is left is to add in an automated quota increaser, and to allow for binding on elements/parents. That last part would make the plugin stupid simple to use since you just attached it to your container [ $(‘#container’).cacheImages(); ] and it would take care of the rest, even with dynamically inserted stuff. But that’s for another night.