HTML5 local storage is a really cool feature which is super easy to use and fairly useful, especially for your HTML5 web applications. I have recently started using it for a few items here and there and am impressed with how versatile it is.
Local storage is a key value pair based storage which stores string data, this is important to note. There really aren’t a lot of built in ways to do data modeling or searching it is just raw data storage. However, it is really cool that it is persistent storage that goes beyond just the current session.
There are a couple of key things to remember about using local storage. It is all based on the browser, computer, and URI you are on. If you change any of those things then you won’t see that stored data anymore.
Coding With Local Storage
Save to Local Storage
// Explicit way localStorage.setItem("link", "http://buddylindsey.com"); // Shortcut way localStorage.link = "http://buddylindsey.com";
The first way is fairly easy to figure out. However, the shortcut needs a bit of explaining. Note how I used link at the end of
localStorage that is the shortcut. You can change it to just about anything and it will be stored using that key.
Access Data from Local Storage
// Explicity way var data = localStorage.getItem("link"); // Shortcut way var data = localStorage.link
Note again on using the key at the end of localStorage to get the data.
I have two HTML 5 applications on github which use local storage if you want to look at them and how it is used in a more real world situation. Look in the
html5-c25k app is an example of an actual HTML5 application which can be run as a website Couch to 5k it is also used as an application with Mozilla’s open web apps (App store now defunct). I even packaged it up in phonegap and it will be submitted to the app store for iOS (Was never approved). It is cool to see how versatile using HTML5 can really be for cross platform compatibility
Usage in Other Frameworks
More and more frameworks are being built to utilize
localStorage as a storage medium. Sencha touch is one of them and allows for doing better data modeling for mobile web applications. Also backbone.js has some libraries which allow you to override the sync functionality to use local storage as well.
As we move more and more to web applications which act as local web apps local data storage is important. Fortunately it is simple to use and with more and more frameworks making it easier to do life shall be more interesting to see what people use with it.