如何根据 HTML 用户输入创建和保存对象答案

【问题标题】：How do I create and save an Object based on the HTML user input如何根据 HTML 用户输入创建和保存对象
【发布时间】：2018-04-02 12:15:49
【问题描述】：

好的，所以我正在尝试创建一个需要用户名、名字、姓氏、密码和电子邮件的注册表单。这些将由用户填写。我有两个单独的 js 文件 - 一个控制器，我（将）有注册的逻辑，还有一个“帐户持有人”，我有一个对象数组（用户）。

在帐户文件中，我有一个构造函数用户：

function User(email,username,firstName,lastName, birthdate,password){
        this.email = email;
        this.username = username;
        this.firstName = firstName;
        this.lastName = lastName;
        this.birthdate = birthdate;
        this.password = password;
    }

在下面的代码中，我将控制器连接到帐户文件并为按下注册按钮时创建一个事件监听器：

（开头的变量是HTML文件中的输入字段）

var regEmail = document.querySelector('.register-email-input');
var regUsername = document.querySelector('.register-username-input');
var regFirstName = document.querySelector('.register-firstName-input');
var regLastName = document.querySelector('.register-lastName-input');
var regBirth = document.querySelector('.register-birth-input');
var regPassword = document.querySelector('.register-password-input');
var confirmPass = document.querySelector('.register-confirmPass-input');
var regBtn = document.querySelector('.button-register-account');

function include(file) {

    var script = document.createElement('script');
    script.src = file;
    script.type = 'text/javascript';
    script.defer = true;

    document.getElementsByTagName('head').item(0).appendChild(script);
}

include('./js/accounts.js');


regBtn.addEventListener('click', function(){
    var user = new User(regEmail.value, regUsername.value, regLastName.value, regBirth.value, regPassword.value);
    
    console.log(user);  //check if the data is correct
   
})

到目前为止，代码有效，但我想将新创建的对象（用户）保存在帐户文件中。我该怎么做？

【问题讨论】：

可以使用localstorage存储用户的信息，然后从第二个js文件中取回

标签： javascript html object

【解决方案1】：

您可以在帐户文件中创建用户数组，然后将新创建的用户添加到数组中。还要在accounts文件的user函数中添加添加到users数组的方法。当您完成创建新用户后，只需调用此添加方法即可将其添加到用户列表中。

【讨论】：

【解决方案2】：

您无法保存帐户文件，因为它只是用户的模型方案。

在浏览器上保存数据的一种方法是保存在 localStorage 上（示例如下）。但是，不建议在浏览器上保存用户数据（如密码）。

保存用户对象

localStorage.setItem('user', JSON.stringify(user))

检索用户对象

let user = JSON.parse(localStorage.getItem('user'))

【讨论】：

【解决方案3】：

据我了解，如果你的两个js文件包含在同一个html文件中，你可以通过将其声明为全局来共享变量。

所以声明一个变量为

var user;

然后

regBtn.addEventListener('click', function(){
    user = new User(regEmail.value, regUsername.value, regLastName.value, regBirth.value, regPassword.value);

    console.log(user.email);  //check if the data is correct

});

如果两个文件都包含在同一个 html 文件中，则可以从两个 js 文件访问此变量。

否则，您可以将 localStorage 保存为 json 字符串并像其他答案一样检索。

【讨论】：