JS 记住我复选框 - 信息不被召回

Question

我有以下代码。问题是，当我将它放在 html 页面上时，代码可以正常工作，并且当我重新加载页面时，值会预先填充在输入字段中。

但是当我将其移动到 tools.js 文件时，这些字段无法在表单上预填充。我希望稍后返回时预先填充它们。

任何想法：

<div>
     <label>
     <input type="checkbox" id="customerRemember"  name="remember" > Remember me
     </label><br>
</div>

<input type="submit" id="submitButton" value='Submit'>

和

<script>

// Code to remember user details when remember me option checked on checked fiel------///
const rmCheck = document.getElementById("customerRemember"),
    nameInput = document.getElementById("name"),
    mobileInput = document.getElementById("mobile"),
    emailInput = document.getElementById("email");

if (localStorage.checkbox && localStorage.checkbox !== "") {
  rmCheck.setAttribute("checked", "checked");
  nameInput.value = localStorage.username;
  mobileInput.value = localStorage.usermobile;
  emailInput.value = localStorage.useremail;
} else {
  rmCheck.removeAttribute("checked");
  nameInput.value = "";
  mobileInput.value = "";
  emailInput.value = "";
}

submitButton.onclick =function() {
  if (rmCheck.checked && emailInput.value !== "") {
    localStorage.username = nameInput.value;
    localStorage.usermobile = mobileInput.value;
    localStorage.useremail = emailInput.value;
    localStorage.checkbox = rmCheck.value;
  } else {
    localStorage.username = "";
    localStorage.usermobile = "";
    localStorage.useremail = "";
    localStorage.checkbox = "";
  }
}
</script>

Answer 1

用 window.onload = function() 包装代码解决了这个问题

    window.onload = function() {
    
    const rmCheck = document.getElementById("customerRemember"),
    nameInput = document.getElementById("name"),
    mobileInput = document.getElementById("mobile"),
    emailInput = document.getElementById("email");

if (localStorage.checkbox && localStorage.checkbox !== "") {
  rmCheck.setAttribute("checked", "checked");
  nameInput.value = localStorage.username;
  mobileInput.value = localStorage.usermobile;
  emailInput.value = localStorage.useremail;
} else {
  rmCheck.removeAttribute("checked");
  nameInput.value = "";
  mobileInput.value = "";
  emailInput.value = "";
}

submitButton.onclick =function() {
  if (rmCheck.checked && emailInput.value !== "") {
    localStorage.username = nameInput.value;
    localStorage.usermobile = mobileInput.value;
    localStorage.useremail = emailInput.value;
    localStorage.checkbox = rmCheck.value;
  } else {
    localStorage.username = "";
    localStorage.usermobile = "";
    localStorage.useremail = "";
    localStorage.checkbox = "";
  }
}

}