为什么我的登录脚本不起作用？

Question

我使用JQuery创建了一个登录脚本，当用户名和密码的值等于localstorage中的用户名和密码的值（在单击“注册”时将存储它们）时，它将隐藏登录div并显示一个名为“ accent”的div。 但是，无论我在JavaScript中做什么，登录页面都会保留，并且重音页面永远不会显示。

我创建了一个jsfiddle，表明我的意思是： http : //jsfiddle.net/CR47/bpztq/

这是登录按钮的代码：

$('#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.');
        }
    }
});

本地存储的“已登录”值确实设置为“是”。

Answer 1

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

$('#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

您需要在以下位置阻止重新加载页面：

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

添加e.preventDefault();

同样，您需要分配变量而不是对其进行比较，请更改：

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

至：

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

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