by

Using HTML5’s Localstorage API for protecting forms

Reading Time: 2 minutes

One of my new favorite features of HTML5 is the wicked awesome storage options. One of the first cool things I thought was to come up with a way to protect a user’s form information. Let’s pretend you been filling out that credit application or Kitty Wig order form and a bald eagle drops a deer on the phone lines. Well… crap balls! What do you do? Leave the laptop open and race to a starbucks? What if you were on your phone and you’re stuck in a tunnel? I present to you, Forminator T100.

Basics of the localstorage API

I’m not going to lie, everything I know about it I learned from Remy Sharp and Bruce Lawson’s book, Introducing HTML5. I recommend you start there.

This stuff is super easy, you either getItem, or setItem, and you only need two parameters: name and value.

LocalStorage is created by the web browser, for the web browser. It’s domain-specific; one website can’t access the localstorage data from another. Being more secure than cookies, it also doesn’t have an expiration date like cookies. Also, since it isn’t a cookie, a user’s browser settings for cookies have no bearing on whether we set or delete localstorage data. So to quote Bruce and Remy,

it’s like cookies on steroids.

Now, here’s the other awesome thing: localstorage works in all your browsers, back to IE8! So there’s no reasonable excuse not to start taking advantage of it.

So, behold the simplicity of localstorage:

localStorage.setItem(name, value);

That’s it — other than the fact that everything goes into the value field as a string, even if it’s a number. So watch out for doing math with values directly out of localstorage. If value = "1", that means that value + 1 = 11, not 2!

So, that led me to do something simple and logical when I apply jQuery. Make the name of the input field the name, and set the value of the input field as… well… value.

 var name;
    var value;
    var name = $(this).attr("name");
    var value = $(this).val();
    localStorage.setItem(name, value);

When to capture the form data

The best event I could think of is keyup. So every time the user releases a key, we resubmit the data. To cover the widest possibilites of data, I’m selecting all of the form elements I can think of. So a word of warning is that this will capture input[type="password"], too. Granted, no other domains can access this data, but you may want to exclude it if you’re customizing the code.

$('input, datalist, keygen, optgroup, select, textarea').keyup(function(event){ 
    var name;
    var value;
    var name = $(this).attr("name");
    var value = $(this).val();
    localStorage.setItem(name, value);
});

There’s one outlier though — it’s an outlier only for HTML5: the range input. For that, I use mousemove(), but I wouldn’t be opposed to change(), either.

$('[type="range"]').mousemove(function(event){
 var name;
    var value;
    var name = $(this).attr("name");
    var value = $(this).val();
    localStorage.setItem(name, value);    
});

Getting the data back

Now, I’ll admit that I’m not a great programmer, so Alex Klock, a colleague at Tahzoo, told me to use the each() bit to get each input to repopulate its values.

$('input').each(function(event) {
var fieldkey = $(this).attr("name");
var fieldval = localStorage.getItem(fieldkey);
$(this).val(fieldval);
});

So here’s my Fiddle. There is an output section where you can get a realtime update of the values being captured. So if you were to use Forminator T100 as a plugin, you can nix that little bit of code.

[follow up]

The Forminator T100 is now a jQuery plugin. Read the follow up post!

And feel free to fork me on Github!