Using HTML5 LocalStorage for Fonts / Images / Popular Plugins

Question

1. Has anyone used localStorage successfully to store font files referenced by CSS? How can I implement this?

2. For images, I know I can binary encode the images in script and save into localStorage, but that would mean a very large script code. If the bloated script is loaded everytime, I don't see any real benefit. If the script is cached as a seperate file, it would be the same as caching the image file in the first place. Am I missing something or there really is no benefit is normal circumstance for localStoraging images.

3. Anyone successfully implemented localStoraging popular plugins from Facebook/Google/Twitter and willing to share which are the ones most useful/applicable for caching?

Answer 1

I have no idea what your browser support requirements are like.

1. localStorage works in IE8+.
2. @font-face has varying support, but IE9+ supports WOFF fonts.
3. I think you'd need to base64 encode your fonts for them to work with localStorage.
4. dataUri's (required for base64'd fonts) have size limitations in IE8 (I believe it's 32k).
5. Cufon seriously sucks if you ask me. In my case it's WOFF support or nothing.

This article talks about storing images in local storage. Of course it's insanely fast: http://www.sencha.com/learn/taking-sencha-touch-apps-offline/

As for fonts, well I'm looking at doing that myself. I'll let you know how it works out :)

Also, check out caniuse.com for browser support:

• http://caniuse.com/#search=localstorage
• http://caniuse.com/#search=datauri