Local Storage

In the good old days we used to do many things to persist form information between pages. All of us have filled at least once one form to search a job, and we all needed to fill that enormous list of fields by entering education info, previous experience, etc. Imagine what could happen if for some reason (Windows?) the browser crashes, and all the form information is lost. That could be a good reason to simply not look for a job, isn't it? So as I was saying, in the good old days pages with many fields were splitted in two or more pages, so you fill first your email, username, password, first and last name; submit that form; and in the second page you enter your age, your gender, your birthdate, etc. How were the values persisted in the second page? There were a set of options:

* Cookies, which is storage in the client side. Every request to a domain includes these cookies. This means that your browser request will contain much more info than needed.
* Sessions; which is information stored in the server-side and retrieved by a SessionId, which is a cookie in the client side. So on each request, your browser sends the session ID and the rest of the info is obtained from the server.
* Hidden fields. The first page contains a form with, as previously said, email, username, password, first and last name. The second page will contain a form with the input boxes to fill age, your gender, your birthdate, etc; but will also contain a set of hidden fields to keep the values for email, username, etc. as specified before. When the second page is submitted, all fields will be sent to the server.

All these options are valid, are still working and can be used; each one has advantages and disadvantages. But what I want to introduce now is the LocalStorage feature provided by HTML5. LocalStorage is not cookie based, is not session based and is not part of the form. LocalStorage is just, as the name says, local storage of information, on the client side, and that is not sent to the webserver on the requests. So for example I start writing an email, and the browser chrashes. When I open back the same page, I still have the form exactly as it was before the crash.

LocalStorage works as a JS array and can store only strings on each key. This means that you can not store an array in a key, except if you serialize it. Numbers will be stored as strings as well, so you must parseInt() them, or paseFloat() them. You can also iterate over the elements in the localStorage element with the help of the classic .length array property. Also content in LocalStorage will never expire, it will remain in the browser until you clear the private data.

You can see an example in http://www.nmac.com.ar/examples/localstorage.php; but basically you can operate on it in any of these ways:

Set a value
localStorage['country1'] = 'Canada';
localStorage.setItem('country2', 'Canada');
localStorage['cities'] = JSON.stringify(['Montreal','Toronto','Vancouver']); // We can not store an array, but we can store a string

Get a value
country1 = localStorage['country1'];
country2 = localStorage.getItem('country2');
cities = JSON.parse(localStorage['cities']); // We can not store an array, but we can store a string

Just remember that before using localStorage you should check it's availability, I suggest to use Modernizr to do so.

Links:
Reference: http://dev.w3.org/html5/webstorage/
Detailed and friendly description: http://diveintohtml5.org/storage.html