javascript - 在一键 JSON 中存储多个数组值
问题描述
问题:它使用 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.");
}
}
解决方案
我使用了您的代码并将其添加到小提琴中。但我没有使用输入字段,而是使用全局变量并为这些变量设置新值。
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,我不能:-(
推荐阅读
- selenium - Selenium IDE Web 驱动程序 Chrome
- google-apps-script - 为什么我的共享用户不能使用我在 Google 表格中写入的脚本?
- python - 带有 Python 的 Google 表格 API
- python - 如何修改 Pytorch 中的 loss.backward() 以解决 np.nan 的问题?
- javascript - 按钮 OnClick 仅返回适用于第一个元素
- python - Python:写长度控制
- yaml - 如何在 Swagger Codegen (Gradle) 中为 OpenAPI 3.0 指定 templateDir?
- java - ActivityMainBindingImpl.java 的问题
- ruby-on-rails - Rails DB 没有填充数据
- typescript - Next.js Typescript 环境变量不起作用