如何基於HTML用戶輸入創建和保存對象

Question

好的，所以我試圖創建一個注冊表單，該表單需要用戶名，名字，姓氏，密碼和電子郵件。 這些將由用戶填寫。 我有兩個單獨的js文件-一個控制器（我將（具有）用於注冊的邏輯）和一個“帳戶持有人”（其中具有一個對象（用戶）的數組）。

在帳戶文件中，我有一個構造函數User：

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

在下面的代碼中，我將控制器連接到帳戶文件，並在按下注冊按鈕時創建一個eventListener：

（開頭的變量是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 }) 

到目前為止，該代碼有效，但是我想將新創建的對象（用戶）保存到帳戶文件中。 我怎樣才能做到這一點？

Answer 1

您可以在帳戶文件中創建用戶數組，然后在數組中添加新創建的用戶。 還要在帳戶文件的用戶功能中添加添加到用戶數組的方法。 完成創建新用戶后，只需調用此添加方法即可將其添加到用戶列表中。

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

});

如果兩個js文件都包含在同一個html文件中，則可以從這兩個js文件中訪問此變量。

否則，您可以將其另存為localString作為json字符串，並像其他答案一樣進行檢索。