Why won't my login script work?

Question

I've created a login script with JQuery that when the values of username and password equal the Username and Password values in localstorage (they are stored when hitting "Register"), it hides the login div and shows a div called 'accent'. However no matter what I do in the javascript, the login page persists and the accent page never shows.

I've created a jsfiddle that shows that I mean: http://jsfiddle.net/CR47/bpztq/

Here is the code for the login button:

$('#loginButton').click(function(){
    if(localStorage.getItem('Username') != null || localStorage.getItem('Username') != ''){
        var cu = localStorage.getItem('Username');
        var cp = localStorage.getItem('Password');
        alert(cu);//I've alerted to show that the getItem is working
        alert(cp);
        var iu = $('#username').val();
        var ip = $('#password').val();
        if(iu == cu && ip == cp){
            $('#login').hide(0);
            $('#accent').show(0);
            localStorage.setItem('Logged In', 'yes');
            $('#name').val() == localStorage.getItem('Name');
            $('#gender').val() == localStorage.getItem('Gender');
            $('#age').val() == localStorage.getItem('Age');
            $('#address').val() == localStorage.getItem('Address');
            $('#phone').val() == localStorage.getItem('Phone');
            $('#email').val() == localStorage.getItem('Email');
        }else{
            alert('Incorrect username/password combo.');
        }
    }
});

The "logged in" value for localstorage does set to yes.

Answer 1

The problem is that the form is submitted after $('#loginButton') is clicked and so the page reloads. To prevent it, you can add preventDefault() on your Click event.

$('#loginButton').click(function(e){
        e.preventDefault();
        if(localStorage.getItem('Username') != null || localStorage.getItem('Username') != ''){
            var cu = localStorage.getItem('Username');
            var cp = localStorage.getItem('Password');
            alert(cu);//I've alerted to show that the getItem is working
            alert(cp);
            var iu = $('#username').val();
            var ip = $('#password').val();
            if(iu == cu && ip == cp){
                $('#login').hide(0);
                $('#accent').show(0);
                localStorage.setItem('Logged In', 'yes');
                $('#name').val() == localStorage.getItem('Name');
                $('#gender').val() == localStorage.getItem('Gender');
                $('#age').val() == localStorage.getItem('Age');
                $('#address').val() == localStorage.getItem('Address');
                $('#phone').val() == localStorage.getItem('Phone');
                $('#email').val() == localStorage.getItem('Email');
            }else{
                alert('Incorrect username/password combo.');
            }
        }
    });

Answer 2

You need to prevent reloading page, in:

$('#loginButton').click(function (e){

Add e.preventDefault();

As well you need to assign variables not compare them, change:

  $('#age').val() == localStorage.getItem('Age');

to:

  $('#age').val() = localStorage.getItem('Age');

BTW, this SO post may be helpful for you - Difference between == and === in JavaScript