sessionStorage returns undefined in one field, but works in other

Question

I have this code:

// Run on page load
window.onload = function() {

    // If values are not blank, restore them to the fields
    var personal_number = sessionStorage.getItem('personal_number');
    if (personal_number !== undefined){
        $('#personal_number').val(personal_number);
    }

    var email = sessionStorage.getItem('email');
    if (email !== undefined){
        $('#username').val(email);
    }

    var password= sessionStorage.getItem('password');
    if (password !== undefined){
        $('#password').val(password);
    }
}

// Before refreshing the page, save the form data to sessionStorage
window.onbeforeunload = function() {
    sessionStorage.setItem("personal_number", $('#personal_number').val());
    sessionStorage.setItem("email", $('#username').val());
    sessionStorage.setItem("password", $('#password').val());
}

This "works" if I add a value to personal_number, email and password it gets saved to my sessionStorage and when I refresh the page, my input fields get rightly populated.

But when I go to another page (within the same website) and return back, I get undefined outputed in personal_number input field and the correct values in the others.

I dont understand why!

First, it should not output anything if the value is undefined because: if (personal_number !== undefined).

Second, how come only personal_number is not working and the two other fields are fine?

Update:

I removed password field since cacheing it is insecure.

I have also figured out what is causing the problem, but I have not solved it.

When I visit a page with no input fiels and return then, now, all my fields output undefined. So it seems like i get a new session when I do so.

But how come it still ouputs undefined?

(function ($) {
    // Run on page load
    window.onload = function() {
        var person_number = sessionStorage.getItem("person_number");
        var email = sessionStorage.getItem("email");

        if (person_number !== undefined || person_number !== null ||
            person_number != undefined || person_number != null){
            $('#person_number').val(person_number);
        }
        if (email !== undefined || email !== null || 
            email != undefined || email != null){
            $('#username').val(email);
        }
    }

    // Before refreshing the page, save the form data to sessionStorage
    window.onbeforeunload = function() {
        sessionStorage.setItem("person_number", $('#person_number').val());
        sessionStorage.setItem("email", $('#username').val());
    }
})(jQuery);

I know I am testing for to much, but there is no way this should output undefined!!

Update 2

I also updated it so it will not save inputs if the input is undefined/null. But it still does not work..

(function ($) {
    // Run on page load
    window.onload = function() {
        var person_number = sessionStorage.getItem("person_number");
        var email = sessionStorage.getItem("email");

        if (person_number !== undefined || person_number !== null ||
            person_number != undefined || person_number != null){
            $('#person_number').val(person_number);
        }
        if (email !== undefined || email !== null ||
            email != undefined || email != null){
            $('#username').val(email);
        }
    }

    // Before refreshing the page, save the form data to sessionStorage
    window.onbeforeunload = function() {

        var person_number = $('#person_number').val();
        var email = $('#username').val();

        if (person_number !== undefined || person_number !== null ||
            person_number != undefined || person_number != null){
            sessionStorage.setItem("person_number", person_number);
        }
        if (email !== undefined || email !== null ||
            email != undefined || email != null){
            sessionStorage.setItem("email", email);
        }
    }
})(jQuery);

Answer 1

Your question is quite old and you might have had your answer, by now, but if not, or for any other who's having the same issue :

I think your jquery code is loaded on every page and thus, your onbeforeunload statement tries to store your fields' value on every page, even where the field does not exist and that's when the Items get "undefined".

Before you try to store the value of a field, make sure the field actually exists, using getElementById, for example, like this :

var fieldExists = document.getElementById('person_number');

if(fieldExists !== null) {
    sessionStorage.setItem('person_number', $('#person_number').val());
}

And in your onload, you don't need to test if (person_number !== undefined and so ... only if it's null

if (person_number !== null) {
    $('#person_number').val(person_number);
}

Hope this helps