0

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.

4

2 回答 2

2

问题是表单是在$('#loginButton')单击后提交的，因此页面会重新加载。为了防止它，您可以添加preventDefault()Click 事件。

$('#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.');
            }
        }
    });
于 2013-05-06T01:55:32.887 回答
1

您需要防止重新加载页面，在：

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

添加e.preventDefault();

您还需要分配变量而不是比较它们，更改：

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

至：

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

顺便说一句，这篇 SO 帖子可能对您有所帮助 - JavaScript 中 == 和 === 之间的区别

于 2013-05-06T02:06:34.357 回答