jQuery Mobile – Adding Local Storage

So about a week or so ago I had an idea about a simple jQuery Mobile application that would make use of Local Storage. That was a week ago. Turns out – the “simple” application turned out to be a royal pain in the rear. Not because of Local Storage, but because of some misconceptions and lack of knowledge on my part in jQuery Mobile. What followed was a couple painful days (and more than a few curse words) but after all of that, I feel like I’ve got a better understanding of jQuery Mobile and got to play with some new features. So with that being said, let’s get to the app. My idea was a rather simple one. Given a collection of art, allow the user to browse categories and view individual pieces of art. I’ve done this before as a jQuery Mobile example. But what I thought would be interesting is to add a simple “Favorites” system. As you browse through the art you can select a piece you like, add it to your favorites, and then later have a quicker way to access them. To make things even more interesting, I thought I’d make use of Local Storage. Local Storage is an HTML5 feature, and unfortunately, it isn’t quite as sexy as Canvas so it doesn’t get as many cool demos. But it’s one of those – you know – useful things that is actually pretty well supported. Local Storage is basically a key system of data. You can store, on the browse, a key and a value. Like name=”Raymond”. Unlike cookies, this data is not sent to the server on every request. Rather, it just sits there on the client ready to be used by JavaScript. You’ve got access to both a permanent (localStorage) and session based (sessionStorage) API. The excellent DiveIntoHTML5 talks about Local Storage here. I won’t talk any more about the API as it’s rather quite simple and the Dive site explains it more than well enough. Before getting into this version though, let’s quickly look at the initial, simpler version. My application consists of three HTML files, all powered by ColdFusion. The home page will list categories, the category page will list art, and the detail page will show just an art piece. Let’s start with the index page.

jQuery Mobile – Adding Local Storage
0 votes, 0.00 avg. rating (0% score)