将表单输入保存到localStorage遇两个问题：函数未定义与存储异常

问题1：Uncaught ReferenceError: handleUserLogin is not defined #

• 原因：handleUserLogin 是定义在 DOMContentLoaded 回调内部的局部函数，全局作用域无法访问；同时按钮上的 onclick 属性与JS中的 addEventListener 重复绑定了点击事件。
• 修复：删除HTML按钮上的 onclick="handleUserLogin()" 属性，保留JS中的事件绑定逻辑即可。

问题2：输入内容未保存到localStorage #

• 原因：createLocalDataStorage 函数从未被调用，且该函数无法访问 handleUserLogin 内部的 userInput 局部变量；另外 localStorage.setItem 是同步操作，无需使用 await。
• 修复：将存储逻辑整合到 handleUserLogin 中，或封装成独立函数并在登录逻辑中调用，确保能获取到用户输入值。

修复后的完整代码 #

JavaScript代码

const loginButton = document.getElementById("login");

document.addEventListener("DOMContentLoaded", function() {
  function handleUserLogin() {
    let formInput = document.getElementById("name").value.trim();
    let userInput = formInput;

    if (userInput !== "") {
      alert(`Welcome ${userInput}`);
      // 调用存储函数保存输入值
      saveToLocalStorage(userInput);
    } else if (!isNaN(userInput) && userInput !== "") {
      alert(`Must be text not a number`);
    } else {
      alert("Please fill this form before other actions");
    }

    console.log(userInput);
  }

  function saveToLocalStorage(input) {
    "use strict";
    try {
      localStorage.setItem("userInput", input);
      console.log("User Input has been saved!", input);
    } catch (err) {
      console.log("Error: " + err);
    }
  }

  loginButton.addEventListener("click", handleUserLogin);
});

HTML代码

<div class="simple-login-with-form-dbLocalStorage">
  <form>
    <input type="text" id="name" name="nama" placeholder="fill this blank forms" />
  </form>
  <button type="button" id="login">Login</button>
</div>

<script src="script.js" type="text/javascript"></script>

额外修正点：

1. 原代码中typeof(userInput) === "number"判断无效，因为输入框的value始终是字符串类型，改为用!isNaN(userInput)判断是否为数字字符串。
2. 修正了script标签的属性错误，将text="javascript"改为标准的type="text/javascript"。

内容的提问来源于stack exchange，提问作者UnknownGuys121212