jQuery Sliding Pages

I wanted a series of HTML pages to act like a wizard where they would slide in and out. The show and hide methods of jQuery provide a nice animation using slide but the key was to have each content div be a fixed size with absolute positioning. This places each content div behind the previous one allowing them to appear to slide to the next. 

Here's the code:

HTML5 Storage

The HTML5 specification introduces some options for storing data on the client side. This can be either through session storage which retains the data while the browser is open or local storage which retains the data after the browser is closed.

It is worth noting that HTML5 storage data is stored unencrypted and is accessible to anything from the same domain. While I was able to play with HTML5 storage in Chrome using a local file, this didn't work with Internet Explorer 9 and it appears that it will only work with IE9 when being pulled from a web server.

You can check if HTML5 storage is supported by the client's browser with the following:

Simple data can be stored and retrieved in the following way:

Complex data types can be stored and retrieved by converting them to a string before storing using JSON.stringify() and then converting them back using JSON.parse():

I put together a quick demo using HTML5 local storage to create a phone book that supports adding, editing and deleting. It can be found here.