• #html5 #javascript

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.

Storing Data

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.

Example Usage

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 app.js file.

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.

Conclusion

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.