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>

Your basic premise won't work. Local Storage stores data, well locally. You can't use local storage to check against already in use user names because those would be stored on a server. — Scott Marcus
– Scott Marcus, Commented Feb 10, 2020 at 21:46

Heisenbug · Accepted Answer · 2020-02-10 22:09:30Z

3

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

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.
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) : [];

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
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).

answered Feb 10, 2020 at 22:09

Heisenbug

2231 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Trisma Over a year ago

I don't think a reload will clear the local storage. If you want that behaviour you need sessionStorage. localStorage will (I think) keep it in memory until you close the tab or restart chrome

Trisma Over a year ago

Also, when you do that ternary operator, I would prefer it this syntax : return JSON.parse(userString) || [], otherwise you will do the parse twice, which is not needed. Just some advice

Heisenbug Over a year ago

With respect to the localStorage and the reload: the problem was that the localStorage.setItem() was executed after the refresh, so the execution was interrupted at that point. With respect to the ternary operator: yeah I agree. Another option would be to store the result of the parse in a variable. Anyway I like the idea of the or operator.

Trisma · Accepted Answer · 2020-02-10 22:09:55Z

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

Collectives™ on Stack Overflow

using local storage with javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related