Prototyping With HTML5 localStorage

Prototypes are good for helping clients understand functionality in their application. Prototypes are also really good for usability testing the flows and functionality. Often when conducting usability tests, we tell the test subject that it’s a prototype and to pay no attention to the details as they may not be accurate. A good example of this is a details page. Let’s say you have a list of locations in a location finder application (figure 1). In the prototype you only have one static details page with only one of the locations. Wouldn’t it be nice if the details page information matched the item the test subject selects from the list? localStorage can help you with that!

figure 1

localStorage to the rescue!

localStorage is a part of the Web Storage specification and is super easy to use. My original thought of using localStorage included a learning curve, but I was wrong.

The localStorage object has four main methods:

1. localStorage.setItem() – Sets the item in local storage area
2. localStorage.getItem() – Gets the item from local storage area
3. localStorage.removeItem() – Removes a single item from local storage area
4. localStorage.clear() – Clears all items in local storage area

Now, to use this for the prototype mentioned above, we need to use localStorage.setItem() to set the details to the local storage area when the test subject taps on one of the skatepark locations from the list view.

$('#content').on('tap, '.skatepark-item', function() {

    //get ID of this list item
    var getParkID = $(this).closest('li').attr('id');

    //get skatepark info from html elements
    //and put them in a variable    
    var sp_name = $('#'+getParkID+ ' .name').text();
    var sp_address = $('#'+getParkID+ ' .address').text();
    var sp_city = $('#'+getParkID+ ' .city').text();
    var sp_state = $('#'+getParkID+ ' .state').text();
    var sp_zip = $('#'+getParkID+ ' .zip').text();
    var sp_hours = $('#'+getParkID+ ' .hours').text(); //hidden element
    var sp_distance = $('#'+getParkID+ ' .distance').text();

    //set skateparks item to localStorage
    localStorage.setItem ('skateparkName', sp_name);
    localStorage.setItem ('skateparkAddress', sp_address);
    localStorage.setItem ('skateparkCity', sp_city);
    localStorage.setItem ('skateparkState', sp_state);
    localStorage.setItem ('skateparkZip', sp_zip);
    localStorage.setItem ('skateparkHours', sp_hours);
    localStorage.setItem ('skateparkDistance', sp_distance);
});

You can have your details page (figure 2) have the same info, plus some additional info that was taken from a hidden element (.hours) on the list page.

figure 2

Use localStorage.getItem() to get the skatepark info from the local storage area and inject it into your HTML elements on the details page. When the details page loads, you run this conditional:

if ( localStorage.getItem('skateparkName') ) {
    
    //get skatepark items from localStorage
    //and put them in a variable
    var sp_name = localStorage.getItem('skateparkName');
    var sp_address = localStorage.getItem('skateparkAddress');
    var sp_city = localStorage.getItem('skateparkCity');
    var sp_state = localStorage.getItem('skateparkState');
    var sp_zip = localStorage.getItem('skateparkZip');
    var sp_hours = localStorage.getItem('skateparkHours');
    var sp_distance = localStorage.getItem('skateparkDistance');

    //inject skatepark info into html elements
    $('#name').text(sp_name);
    $('#address').text(sp_address);
    $('#city').text(sp_city);
    $('#state').text(sp_state);
    $('#zip').text(sp_zip);
    $('#hours').text(sp_hours);
    $('#distance').text(sp_distance);

}

Using localStorage really is that easy! You could even use sessionStorage instead of localStorage if you only want to retain that data for the life of a single browser session.

How do you deal with data in HTML prototypes?