Using HTML5 Storage to cache application interfacesThursday, August 26th, 2010
One of the things that gets me excited about the new features of browsers is the “HTML5” Web Storage module. I like it mostly because of its simplicity.
The Web Storage idea is to simplify storing of information for the user. I always hated using cookies because of all the domain issues. It was also a mess to check for them and then fall back to other things. Most of all people are paranoid about them and I know a lot of corporate computer users who have all cookies disabled.
Web Storage on the other hand is a simple object in the browser. You can set localStorage.foo to ‘bar’ and when you read out localStorage.foo next time you load the document it will be ‘bar’. That’s how easy it is. You can store 5MB of textual data which could be integers or strings. With JSON.stringify() you can easily store more complex information.
With localStorage you could do that by simply caching the innerHTML of the main app (if you build it progressively):
You can check the source of the trick in this Gist on GitHub:
If you don’t get what I am doing here, check this quick screencast:
I’ll be using that a lot – it is terribly simple and yet powerful.