Хранение нескольких значений массива в одном ключе JSON

Question

Проблема: это регистрация новой пользовательской формы с HTML.Я должен хранить несколько массивов (содержащих «имя пользователя: имя пользователя, пароль: пароль, topScore: 0) в одном ключе JSON (ключ« пользователь »), и все, что он делает сейчас, - это то, что он хранит только один массив, если я ввожу другой»просто перезаписывает текущий.

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

Исправлено: 1. изменено onsubmit = "return registerNewUser (users)" 2. Поставить return false;внутри оператора else, где используется user.push 3. Положите return false;внутри оператора else после оповещения («Пароли не совпадают») Спасибо, ребята!

Answer 2

Я использовал ваш код и добавил его в скрипку .Но вместо полей ввода я использовал глобальные переменные и просто установил для них новые значения.

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();

Он работает отлично... помимо того, что упоминали @HMR и @Shubham Jain.

вы должны переименовать ваш массив для пользователей, чтобы все знали, что он содержит несколько пользователей, а не только одного.И если вы не инициализируете пользователей с помощью элемента localStorage, какой смысл в любом случае хранить их там.

Я думаю, что вы просто что-то тестируете, и поэтому вы храните пароли в localStorage.В противном случае было бы лучше хранить эту конфиденциальную информацию в бэкэнд-приложении.И зашифровать их.

Я бы прокомментировал это, но, поскольку моя репутация ниже 50, я не могу: - (