如何实现用户名创建表单刷新后保持隐藏且用户名持久显示？

要达成你需要的效果，只需在页面加载时添加一段检查localStorage的逻辑，确保刷新页面后能根据已有状态同步表单和用户名的显示状态。

修改后的完整代码如下：

<!DOCTYPE html>
<html>

<body>
  <form id="username-creator" class="username-creator">
    <input type="text" id="username-creator-input" required>
    <button type="submit">Submit</button>
  </form>
  <div id="username-container">
    <h1 id="username-container-h1">
      <!-- This is where the created username goes -->
    </h1>
  </div>
  <script>
    // 页面加载完成后检查本地存储的用户名
    window.addEventListener('load', function() {
      const savedUsername = localStorage.getItem('username');
      const form = document.getElementById('username-creator');
      const usernameH1 = document.getElementById('username-container-h1');
      
      if (savedUsername) {
        // 存在已保存的用户名则隐藏表单，显示用户名
        form.style.display = 'none';
        usernameH1.innerText = savedUsername;
      } else {
        // 无保存的用户名则显示表单
        form.style.display = 'block';
      }
    });

    // 原有的表单提交逻辑
    document.getElementById('username-creator').addEventListener('submit', function(event) {
      event.preventDefault();
      const username = document.getElementById('username-creator-input').value;
      localStorage.setItem('username', username);
      document.getElementById('username-creator').style.display = "none";
      document.getElementById('username-container-h1').innerText = username;
    });
  </script>
</body>

</html>

核心逻辑说明 #

• 页面初始化检查：通过window.addEventListener('load', ...)确保在DOM元素全部渲染完成后执行状态检查，避免找不到元素的问题。
• 本地存储读取：用localStorage.getItem('username')获取已保存的用户名，以此判断用户是否已创建过用户名。
• 状态同步控制：根据是否存在已保存的用户名，分别控制表单的显示/隐藏，以及用户名容器的内容填充。

修改后，无论页面是否刷新，只要localStorage中存在用户名，表单就会保持隐藏状态，用户名也会持续显示在h1容器内。

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