为什么我的登录脚本无法工作？

Question

我用JQuery创建了一个登录脚本，当用户名和密码的值等于localstorage中的用户名和密码值时（它们在点击“Register”时被存储），它隐藏登录div并显示一个叫做'accent ”。然而，无论我在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.'); 
     } 
    } 
}); 

的“登录”为localStorage的值不设置为yes 。

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后可能对你有所帮助 - Difference between == and === in JavaScript