Question

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

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

＆＃13;

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;
    }

＆＃13;

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

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

＆＃13;

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
   
})

＆＃13;

到目前为止代码工作正常，但我想将新创建的Object（用户）保存在accounts文件中。我怎么能这样做？

Answer 1

您可以在帐户文件中创建用户数组，然后在数组中添加新创建的用户。还在帐户文件的用户功能中添加添加到用户数组的方法。完成创建新用户后，只需将此add方法调用即可添加到用户列表中。

Answer 2

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

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

保存用户对象

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

检索用户对象

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

Answer 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字符串，并像其他答案一样进行检索。

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

3 个答案: