“意外输入结束” Javascript注册/登录系统

Question

我正在学校里做一个项目，实际上我的“注册和登录系统”正在运行，但是现在在进行注册时控制台出现错误。 这是语法错误吗？ 我根本不知道，因为我是使用localStorage的新手。 （这是我使用localStorage的第一个项目）。 我真的可以使用一些帮助来清除错误的解决方法。

干杯。

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!");
      }
  });

Answer 1

您需要先检查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>