為什么我的登錄腳本不起作用？

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中==和===之間的區別