using local storage with javascript

Question

I have a signup form that saves user data. The data doesn't save to local storage when it is supposed to. The app is supposed to sign up a user and save the data to the local storage, if someone attempts to sign up with already existing username, the app prevents the user from doing that.

the javascript file does the following 1) prevents users from signing up with already existing username 2) saves an object to the local storage which is passed into an array

var signUpBtn = document.querySelector('#signUp');
var signUpOver = document.querySelector('.signup__overlay');

var signInBtn = document.querySelector('#signIn');
var signInOver = document.querySelector('.signin__overlay');

var fullname = document.querySelector('#name');
var email = document.querySelector('#email');
var password = document.querySelector('#password');
var age = document.querySelector('#age');
var occupation = document.querySelector('#occupation');
var Address = document.querySelector('#address');

var signupSubmitClicked = document.querySelector('#signupClicked'); 

signupSubmitClicked.addEventListener('click', () => {
  if (fullname.value=="" || email.value=="" || password.value=="" || age.value=="" || occupation.value=="" || Address.value=="") {
    alert("incomplete datails, please fill up everything")
  } else {
    alert("item created")
    addUser(fullname, email, password, age,  occupation, Address);
  }
});

var fetchUsers = () => {
  try {
      var userString = localStorage.getItem('userData');
      return JSON.parse(userString);            
  } catch (error) {
      return [];
  }
};

var saveUser = (users) => {
  localStorage.setItem('userData', JSON.stringify(users));
};

var addUser = (fullname, email, password, age,  occupation, Address) => {
  var users = fetchUsers();
  var user = {
      fullname,
      email,
      password,
      age,
      occupation,
      Address
  };

  var duplicateUsers = users.filter(user => user.email === email);

  if (duplicateUsers.length === 0) {
      users.push(user);
      saveUser(users);
      return user;
  }
};

/*************
signup popup
*************/
signUpBtn.addEventListener('click', () => {
  signUpOver.style.display = 'block';
});

signUpOver.addEventListener('click', () => {
  if(event.target == signUpOver){
    signUpOver.style.display = "none";
  }
});
/*************
signup popup
*************/

/*************
signin popup
*************/
signInBtn.addEventListener('click', () => {
  signInOver.style.display = 'block';
});

signInOver.addEventListener('click', () => {
  if(event.target == signInOver){
    signInOver.style.display = "none";
  }
});
/*************
signin popup
*************/
/** the end */

body {
  width: 100%;
  margin: 0;
  background-color: #F8F9F9;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  align-content: center;
}

#mainPage,
#userPage {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  align-content: center;
}

#userPage {
  display: none;
}

/********************
overlay
********************/
.signup__overlay {
  position: fixed;
  display: none;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0,0,0,0.8);
  z-index: 1;
}

.signup__content{
  position: relative;
  width: 100%;
  max-width: 520px;
  background-color: #ffffff;
  opacity: 1;
  margin: 64px auto;
  padding: 20px;
}

.signin__overlay {
  position: fixed;
  display: none;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: rgba(0,0,0,0.8);
  z-index: 1;
}

.signin__content{
  position: relative;
  width: 100%;
  max-width: 520px;
  background-color: #ffffff;
  opacity: 1;
  margin: 64px auto;
  padding: 20px;
}


/********************
overlay ending
********************/

.headerMain {
  background-color: #000;
  color: #fff;
  width: 100%;
  margin-bottom: 50px;
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
}

.headerUser {
  background-color: #000;
  color: #fff;
  width: 100%;
  margin-bottom: 50px;
  height: 50px;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
}

.upButton {
  margin-bottom: 20px;
}

.upButton, .inButton {
  padding-top: 15px;
  padding-bottom: 15px;
  cursor: pointer;
  width: 100%;
  max-width: 200px;
  background-color: #239B56;
  border: #239B56;
  color: snow;
}

label {
  padding-top: 20px;
}

label,
input {
  width: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>User system</title>
  <link rel="stylesheet" href="css/index.css">
</head>
<body>

  <div id="mainPage">

      <div class="signup__overlay">
        <div class="signup__content">
          <form>
            <label for="name">Full Name</label>
            <input required type="text" id="name" name="name">

            <label for="email">Email</label>
            <input required type="text" id="email" name="email">

            <label for="password">Password</label>
            <input required type="password" id="password" name="password">

            <label for="age">Age</label>
            <input required type="text" id="age" name="age">

            <label for="occupation">Occupation</label>
            <input required type="text" id="occupation" name="occupation">

            <label for="address">Address</label>
            <input required type="text" id="address" name="address">

            <input type="submit" id="signupClicked">
          </form>
        </div>
      </div>

      <div class="signin__overlay">
        <div class="signin__content">
          <form>
            <label for="email">Email</label>
            <input required type="text" id="Email" name="email">

            <label for="email">Password</label>
            <input required type="Password" id="Password" name="Password">

            <input type="submit" id="signinClicked">
          </form>
        </div>
      </div>


    <header class="headerMain">User System</header>
    <section>
        <button class="upButton" id="signUp">Sign Up</button>

        <button class="inButton" id="signIn">Sign In</button>
    </section>

  </div>

  <div id="userPage">

      <header class="headerUser">User System</header>
      <section>
          
      </section>
  
    </div>
    
    <script src="js/index.js"></script>
</body>
</html>

Answer 1

Hi Opeyemi and welcome on StackOverflow.

First of all you have to know that this way of doing is good for testing, but it won't fit for any production applications.

The reason this is failing is because this function :

var fetchUsers = () => {
  try {
      var userString = localStorage.getItem('userData');
      return JSON.parse(userString);            
  } catch (error) {
      return [];
  }
};

is actually returning a null value. Due to that null value, the rest of the code get stuck. This part of the code will get stuck for example :

var duplicateUsers = users.filter(user => user.email === email);

Normally these errors appear in your console, so you really should check that out.

Once that is fixed it should be pretty easy to fix the rest

Answer 2

Okay so here are several things we need to discuss about. Let's start with the code:

1. When you have a <input type="submit"> inside a form, the button will re-fresh the page when it's clicked. It's the behaviour by default of the submit button. That's why nothing is stored on the localStorage. To prevent this from happening, you need to use the event.preventDefault() method. Check out this link.
2. After fixing the preventDefault bug, we face another problem: the function fetchUsers returns null. That's because localStorage.getItem('userData') returns a null if nothing is on the localStorage. The try/catch dosn't work here, since localStorage.getItem('userData') dosn't throw an error. If nothing is there, it simply returns a null (but no error). Solucion: change your return to use a ternary operator:

return JSON.parse(userString) ? JSON.parse(userString) : [];            

3. Using document.querySelector('#name') dosn't return what the user has written on that input. To get what the user writes on an input, you have to use: document.querySelector('#name').value
4. If you put the var fullname = document.querySelector('#name').value; on the global scope (at the begining of the script) it will take the value that the input had when the script was first loaded (which is... ""). You want to take that value every time the user clicks on the button. So you have to move those variables (fullname, email, password) inside the signupSubmitClicked.addEventListener.

And now the most important thing to discuss: why are you trying to store personal data on the localStorage? You need to be aware that the information on the localStorage is not secure, not really stored into any server, and not recommended at all. If you are doing this project to practice and learn it's okay. You can use this as a playground to learn. But remember: if you want to store personal information in a real-world way, you need to create a server (a back-end to your web).