2015-10-05 195 views
0

我在學校做了一個項目,實際上我的「註冊和登錄系統」工作正常,但是現在我在註冊時出現控制檯錯誤。這是一個語法錯誤?我根本不知道,因爲我完全不熟悉localStorage。 (這是我使用localStorage的第一個項目)。我真的可以用一些幫助來清除如何解決我的錯誤。「意外的輸入結束」Javascript註冊/登錄系統

乾杯。

HTML5

<div id="registerDialog" title="Register as user" style="display: none;"> 
    <input id="txtUserName" type="text" placeholder="User name"> 
    <input id="txtUserPassword" type="text" placeholder="Password"><br> 
    <button id="dialogRegBtn">Register</button> 
</div> 

<div id="loginDialog" title="Login" style="display: none;"> 
    <input id="loginUserName" type="text" placeholder="User name"> 
    <input id="loginUserPassword" type="text" placeholder="Password"><br> 
    <button id="dialogLoginBtn">Login</button> 
</div> 

jQuery和JAVASCRIPT

$(document).on("click", "#dialogRegBtn", function() { 
     var userName = $("#txtUserName").val(); 
     var userPassword = $("#txtUserPassword").val(); 
     var aUsers = JSON.parse(localStorage.aUsers); 
     var oUser = { 
      "userName": userName, 
      "password": userPassword 
     }; 
     aUsers.push(oUser); 
     localStorage.aUsers = JSON.stringify(aUsers); 
    }); 

    $(document).on("click", "#loginBtn", function() { 
     $("#loginDialog").dialog(); 
    }); 

    $(document).on("click", "#dialogLoginBtn", function() { 
     var aUsers = JSON.parse(localStorage.aUsers); 
     var userName = $("#loginUserName").val(); 
     var userPassword = $("#loginUserPassword").val(); 
     var loggedIn = false; 

     for (var i = 0; i < aUsers.length; i++) { 
      if (aUsers[i].userName == userName && aUsers[i].password == userPassword) { 
       loggedIn = true; 
      } 
     }; 
     if (loggedIn == true) { 
      $("#loginDialog").append("Login was succesful"); 
     } else { 
      $("#loginDialog").append("No user with that login information!"); 
     } 
    }); 
+0

你得到什麼錯誤? –

+2

'#dialogLoginBtn'代碼在嘗試解析它之前不檢查本地存儲中是否有任何內容。 – Barmar

+1

什麼時候發生錯誤,以及它發生了什麼? – Barmar

回答

0

您需要檢查localStorage的條目是否包含試圖解析之前,任何東西。在下面的代碼中,如果localStorage.aUsers中沒有任何內容,則默認aUsers爲空數組。

$(document).on("click", "#dialogRegBtn", function() { 
 
     var userName = $("#txtUserName").val(); 
 
     var userPassword = $("#txtUserPassword").val(); 
 
     var aUsers = localStorage.aUsers ? JSON.parse(localStorage.aUsers) : []; 
 
     var oUser = { 
 
      "userName": userName, 
 
      "password": userPassword 
 
     }; 
 
     aUsers.push(oUser); 
 
     localStorage.aUsers = JSON.stringify(aUsers); 
 
    }); 
 

 
    $(document).on("click", "#loginBtn", function() { 
 
     $("#loginDialog").dialog(); 
 
    }); 
 

 
    $(document).on("click", "#dialogLoginBtn", function() { 
 
     var aUsers = localStorage.aUsers ? JSON.parse(localStorage.aUsers) : []; 
 
     var userName = $("#loginUserName").val(); 
 
     var userPassword = $("#loginUserPassword").val(); 
 
     var loggedIn = false; 
 

 
     for (var i = 0; i < aUsers.length; i++) { 
 
      if (aUsers[i].userName == userName && aUsers[i].password == userPassword) { 
 
       loggedIn = true; 
 
      } 
 
     }; 
 
     if (loggedIn == true) { 
 
      $("#loginDialog").append("Login was succesful"); 
 
     } else { 
 
      $("#loginDialog").append("No user with that login information!"); 
 
     } 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="registerDialog" title="Register as user"> 
 
    <input id="txtUserName" type="text" placeholder="User name"> 
 
    <input id="txtUserPassword" type="text" placeholder="Password"><br> 
 
    <button id="dialogRegBtn">Register</button> 
 
</div> 
 

 
<div id="loginDialog" title="Login"> 
 
    <input id="loginUserName" type="text" placeholder="User name"> 
 
    <input id="loginUserPassword" type="text" placeholder="Password"><br> 
 
    <button id="dialogLoginBtn">Login</button> 
 
</div>