如何使用户名创建表单在页面刷新后永久隐藏并持久显示用户名

作者：袖梨 2026-07-12

本文讲解如何利用 localstorage 检测已保存的用户名，在页面加载时自动隐藏表单、恢复显示用户名，实现真正的“一次填写、永久生效”效果，适用于登录前引导页、个性化设置等场景。

本文讲解如何利用 localstorage 检测已保存的用户名，在页面加载时自动隐藏表单、恢复显示用户名，实现真正的“一次填写、永久生效”效果，适用于登录前引导页、个性化设置等场景。

要让用户名创建表单在页面刷新后依然保持隐藏状态，并确保用户名持续显示在 <h1> 容器中，核心在于在 DOM 加载完成时立即读取 localStorage 状态并响应式更新 UI，而非仅在表单提交时操作。

以下是完整、健壮的实现方案：

✅ 关键逻辑说明

页面首次加载时，先检查 localStorage.getItem('username') 是否存在；
若存在，则直接隐藏表单、填充用户名到容器；
若不存在，则保持表单可见，等待用户输入；
表单提交事件保持不变，但需确保 event.preventDefault() 防止默认跳转。

✅ 优化后的完整代码（含错误处理与最佳实践）

<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="UTF-8">  <title>用户名持久化示例</title></head><body>  <form id="username-creator" class="username-creator">    <input type="text" id="username-creator-input" required placeholder="请输入用户名">    <button type="submit">提交</button>  </form>  <div id="username-container">    <h1 id="username-container-h1">欢迎回来！</h1>  </div>  <script>    // 获取关键 DOM 元素（避免重复查询）    const form = document.getElementById('username-creator');    const input = document.getElementById('username-creator-input');    const displayH1 = document.getElementById('username-container-h1');    // 页面加载时：检查 localStorage 并初始化 UI    function initUsernameState() {      const savedUsername = localStorage.getItem('username');      if (savedUsername && savedUsername.trim() !== '') {        form.style.display = 'none';        displayH1.textContent = `你好，${savedUsername}！`;      } else {        displayH1.textContent = '请创建您的用户名';      }    }    // 表单提交处理    form.addEventListener('submit', function (event) {      event.preventDefault();      const username = input.value.trim();      if (!username) return; // 防止空提交      localStorage.setItem('username', username);      form.style.display = 'none';      displayH1.textContent = `你好，${username}！`;    });    // 启动初始化    initUsernameState();  </script></body></html>