“Unexpected end of input” Javascript registration/login system

Question

I am making a project in school and I actually had my "registration and login system" working, but now I get an error in the console, when making a registration. Is it a syntax error? I simply don't know, since I'm completely new to working with localStorage. (This is my first project using localStorage). I could really use some help to clear up how to fix my error.

Cheers.

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 AND 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

You need to check whether the localStorage entry contains anything before trying to parse it. In the code below I default aUsers to an empty array if there's nothing in localStorage.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>