在一个键JSON中存储多个数组值

时间:2018-11-29 07:40:19

标签: javascript html arrays json object

问题: 它使用HTML签署了一个新的用户表单。 我应该在一个JSON密钥(“用户”密钥)中存储多个数组(包含“用户名:用户名,密码:密码,topScore:0)”,它现在所做的所有事情是,它仅存储一个数组,如果我输入另一个数组,只会覆盖当前内容。

// 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.");
  }
}

2 个答案:

答案 0 :(得分:1)

我使用了您的代码并将其添加到fiddle中。但是,我没有使用输入字段,而是使用了全局变量,并只为其设置了新值。

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,所以我不能:-(

答案 1 :(得分:0)

已解决:1.更改了onsubmit =“ return registerNewUser(users)”。2.将return设置为false;在else语句中使用user.push的地方。3. put return false;警报后的其他else语句内(“密码不匹配”)谢谢!