Working on a very cool new HTML5 application, I’ve had some useful experience with using localStorage. For those new to localStorage, it’s simply a way to store key and value pairs locally, meaning that like with cookies,  even after the user has left the page, data can be retrieved. It works differently from cookies in that the data is not stored on the server, rather its stored within the client web browser. It’s especially useful for forms and enhancing the user’s personal experience.

Modern browsers support it well (even IE from 8+). It’s very simple to implement with a little JavaScript. In this example I’ll show you how can store the user’s form data using some jQuery.

First we’ll create a simple form.

1
2
3
4
5
6
7

<form name="local_storage_form" method="post" action="">
 
<input type="text" name="your_name" id="your_name" value="" />
<input type="text" name="your_surname" id="your_surname" value="" />
 
<input type="submit" value="Submit" />
</form>

<form name="local_storage_form" method="post" action="">

<input type="text" name="your_name" id="your_name" value="" />
<input type="text" name="your_surname" id="your_surname" value="" />

<input type="submit" value="Submit" />
</form>

Notice I’ve given the input field the class “localStore”. You can apply this class to all of your fields. We’ll later use this to store the data.

Now the jQuery. We want to check a field as it is updated, and update the localStorage value on the fly. For this we’ll create the function:

1
2
3

$('.localStore').keyup(function () {
    localStorage[$(this).attr('id')] = $(this).val();
});

$('.localStore').keyup(function () {
    localStorage[$(this).attr('id')] = $(this).val();
});

This function will update localStorage, using your field ID, every time you press a key. You could choose to use change() or whatever suits your needs.

Now we will create an init() function to fill in the form automatically if there are values stored in the relevant keys.

1
2
3
4
5
6
7
8

function init() {
    if (localStorage["your_name"]) {
        $('#your_name').val(localStorage["your_name"]);
    }
    if (localStorage["your_surname"]) {
        $('#your_surname').val(localStorage["your_surname"]);
    }
}

function init() {
    if (localStorage["your_name"]) {
        $('#your_name').val(localStorage["your_name"]);
    }
    if (localStorage["your_surname"]) {
        $('#your_surname').val(localStorage["your_surname"]);
    }
}

In this example, we’re identifying each field manually. We check if the variable is set, and if so update our field. You could potentially loop through the keys as well.

So our full code is

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(document).ready(function () {
    function init() {
        if (localStorage["your_name"]) {
            $('#your_name').val(localStorage["your_name"]);
        }
        if (localStorage["your_surname"]) {
            $('#your_surname').val(localStorage["your_surname"]);
        }
    }
    $('.localStore').keyup(function () {
        localStorage[$(this).attr('id')] = $(this).val();
    });
    init();
});

$(document).ready(function () {
    function init() {
        if (localStorage["your_name"]) {
            $('#your_name').val(localStorage["your_name"]);
        }
        if (localStorage["your_surname"]) {
            $('#your_surname').val(localStorage["your_surname"]);
        }
    }
    $('.localStore').keyup(function () {
        localStorage[$(this).attr('id')] = $(this).val();
    });
    init();
});

Once your completed, go ahead and fill in the form, leave you browser and come back to see your data sat there waiting for you

This is a very basic example of what can be done with localStorage. The possibilities are really great and are already in use around the internet today; games, apps, user customisation. Support is good within modern browsers, but I would still see this as a bonus feature rather than something to be used as a fundemental of a site. Check out the w3 working draft on Web Storage here.