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

【问题标题】：Storing multiple array values in one key JSON在一键 JSON 中存储多个数组值
【发布时间】：2019-05-01 05:19:00
【问题描述】：

问题：它使用 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.");
  }
}

【问题讨论】：

附注：您应该不将密码存储在 localStorage 中。不管它是否加密，你都不应该这样做。
您可以更简单地检查用户是否存在：usernameExists=user.some(user=>user.name===username) 和您设置 user 的代码（但不应该是 users 吗？）在您的问题中丢失。确保将其设置为来自 localStorage var users = localStorage.getItem('users') || [];
我发现的一个问题是您将整个用户数组存储在本地存储中，而不是登录的特定用户。

标签： javascript html arrays json object

【解决方案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 提到的东西。

您应该将您的数组重命名为 users，以便每个人都知道它包含多个用户，而不仅仅是一个。如果您不使用 localStorage 项初始化用户，那么将它们存储在那里有什么意义。

我认为您只是在测试某些东西，这就是您将密码存储在 localStorage 中的原因。否则，最好将这些敏感信息存储在后端应用程序中。并对它们进行加密。

我会对此发表评论，但由于我的声誉低于 50，我不能:-(

【讨论】：

我的网站在 apache(localhost) 上运行，所以当我第一次访问它时，我的注册页面地址看起来像“localhost/signup.php”。但是，当我注册一个新用户时，它更改为“localhost/signup.php?username=test&password=test&passwordRepeat=test”。所以问题是，既然你用全局变量测试了我的函数并且它工作得很好，那么问题可能不在它之外吗？以及如何在用户注册后留在同一个 localhost/signup.php 页面上？在我看来，这就是导致我在 localStorage 中覆盖该数组的问题
这实际上是问题所在。解决了： 1. 更改了 onsubmit="return registerNewUser(users)" 2. 将 return false;在使用 user.push 的 else 语句中 3. 将 return false;在 alert("Passwords do not match") 之后的 else 语句中谢谢大家！
@G.Kastauna 你能回答你自己的问题并接受吗？如果是，请在答案中写下来。会发现这个问题并有类似问题的人会看到，这个问题得到了回答：-D

【解决方案2】：

已修复：1. 更改 onsubmit="return registerNewUser(users)" 2. 将 return false;在使用 user.push 的 else 语句中 3. 将 return false;在 alert("Passwords do not match") 之后的 else 语句中谢谢大家！

【讨论】：