HTML5 sessionStorage not working as expected

Question

I am using HTML5 sessionStorage to help populate form field upon refresh, but I am experiencing some strange errors. Basically, if I change any values, the form stops working.

The form as I have currently written it is here; http://jsfiddle.net/takuhii/rjsjj9by/1/

HTML:

<form id="storeFields" method="post" action="">
    <label>First Name:</label>
    <input type="text" name="firstname" id="firstName" class="form-control" value="" />

    <label>Last Name:</label>
    <input type="text" name="lastname" id="lastName" class="form-control" value="" />

    <label>Email:</label>
    <input type="email" name="email" id="email" class="form-control" value="" />

    <input type="submit" class="demo-button" value="Submit" />
</form>

JAVASCRIPT:

function storeDetails() {
    if (sessionStorage["firstname"]) {
        $('#firstName').val(sessionStorage["firstname"]);
    }
    if (sessionStorage["lastname"]) {
        $('#lastName').val(sessionStorage["lastname"]);
    }
    if (sessionStorage["email"]) {
        $('#email').val(sessionStorage["email"]);
    }
}
storeDetails();

$('.form-control').change(function () {
    sessionStorage[$(this).attr('firstName')] = $(this).val();
    sessionStorage[$(this).attr('lastName')] = $(this).val();
    sessionStorage[$(this).attr('email')] = $(this).val();
});

$('#storeFields').submit(function() {
    sessionStorage.clear();
});

The form I derived it from is here; http://jsfiddle.net/takuhii/45zfpfru/8/

HTML:

<form id="storeFields" method="post" action="">
    <label>Name:</label>
    <input type="text" name="name" id="name" class="stored" value="" />

    <label>Email:</label>
    <input type="email" name="email" id="email" class="stored" value="" />

    <label>Message:</label>
    <textarea name="message" id="message" class="stored"></textarea>

    <input type="submit" class="demo-button" value="Submit" />
</form>

JAVASCRIPT;

function storeDetails() {
    if (localStorage["name"]) {
        $('#name').val(localStorage["name"]);
    }
    if (localStorage["email"]) {
        $('#email').val(localStorage["email"]);
    }
    if (localStorage["message"]) {
        $('#message').val(localStorage["message"]);
    }
}
storeDetails();

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

$('#storeFields').submit(function() {
    localStorage.clear();
});

What I don't understand is how simply changing the variables it looks for, breaks the whole form?

Any help would be greatly appreciated, as I really can't see what is wrong

If this is a duplication of another question, I apologise in advance, as I tried looking, but couldn't find a satisfactory answer... Cheers Darren

Answer 1

In your JS try this:

$('.form-control').change(function () {
    sessionStorage[$(this).attr('id')] = $(this).val();
});

You want to be using the value of the id attribute (firstName, LastName, email) as the key to set the correct session value. In your code, you were looking for attributes that didn't exist.