Local Storage with HTML5 and jQuery

HTML5 brings a whole host of new goodies to web design including the new local storage facility where data can be stored on the client where it is easily accessible. Cookies have been the only data storage mechanism on the client that the browser has access to for many years and although they have served us well in that time, they do have their limitations such as the constraints on their size and per-domain limitations. Now we no longer have to worry about these issues and can work with local storage instead.

Local storage has many benefits; in an application that requires frequent access to stored data, reading or writing the data from or to their own computer is always going to be much faster than by sending AJAX requests to the server. We also have access to a much greater size (the draft specification recommends an arbitrary size of 5 megabytes) so we aren’t constrained to the limit of just 4 kilobytes that a cookie allows.

In this tutorial we’ll create a simple document editor, it could be part of your blogging system for example, which will automatically save what is entered into the editor using local storage. We’ll cover how local storage objects are created, and how data can be stored to and read from the storage object.