Storing multiple array values in one key JSON

Question

Problem: Its a sign up a new user form with HTML. Im supposed to store multiple arrays(containing "username: username, password: password, topScore: 0) in one JSON key ("user" key) all it does right now is that it stores only one array, if I enter another one it just overwrites the current.

// In HTML the function is called:
//<form name = "signup" onsubmit="registerNewUser()>

var user = [];


function registerNewUser() {

/** Get the value of username, password and repeat password **/
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var passwordRepeat = document.getElementById("passwordRepeat").value;

/** boolean variable to check if the username already exits **/
var usernameExists = false;

/** if statement to check if password and passwordRepeat match **/
if (password == passwordRepeat) {

/** For loop to scan through registered users to check if username is already in use **/
for(let i = 0; i < user.length; i++) {
  if(user[i].name == username) {
    usernameExists = true;
  }
}
if (usernameExists) {
  alert("This user name already exists.");
}
else {
  /** Put array into users in JSON storage with username,password and score values **/
  user.push( {name: username, password: password, topScore: 0} );
  localStorage.setItem("user", JSON.stringify(user));
  alert("New account successfully created!");

  /** Set variable usernameExists to its original value **/
  usernameExists = false;
  }
}
  else {
    alert("Passwords do not match. Please try again.");
  }
}

Answer 1

i used your code and added it to a fiddle . But instead of input fields, i used global variables and just set new values to those.

html:

<div id="userArray"></div>
<div id="localStorage"></div>

js:

var Username = 'Peter';
var Password = 'Parker';
var PasswordRepeat = 'Parker';

/** your function, but instead of input fields using my variables to set the respective variables inside the function **/

registerNewUser();
document.getElementById("userArray").innerHTML = JSON.stringify(user);
document.getElementById("localStorage").innerHTML = localStorage.getItem("user");

Username = 'Gwen';
Password = 'Stacy';
PasswordRepeat = 'Stacy';
registerNewUser();
document.getElementById("userArray").innerHTML = JSON.stringify(user);
document.getElementById("localStorage").innerHTML = localStorage.getItem("user");

registerNewUser();

It runs perfectly fine... beside the things that @HMR and @Shubham Jain mentioned.

you should rename your array to users, so that everybody knows it contains multiple users and not just one. And if you dont initialize users with the localStorage item, what point in storing them there anyway.

I think you are just testing something and thats why you store the passwords in the localStorage. Otherwise it would be better to store those sensitive informations in a backend application. And encrypt them.

I would have commented this, but since my reputation is below 50, i can't :-(

Answer 2

Got it fixed: 1. changed onsubmit="return registerNewUser(users)" 2. Put return false; inside else statement where user.push is used 3. Put return false; inside else statement after alert("Passwords do not match") Thank you guys!