通过 localstorage 持久化存储用户名，并在页面加载时自动检查、隐藏表单并渲染用户名，即可实现表单“永久隐藏”与用户名跨刷新显示。

通过 localstorage 持久化存储用户名，并在页面加载时自动检查、隐藏表单并渲染用户名，即可实现表单“永久隐藏”与用户名跨刷新显示。

要让用户名创建表单在用户提交后彻底隐藏（包括页面刷新后），同时确保已创建的用户名持续显示在

容器中

，核心在于利用 localStorage 的持久性特性，并在页面初始化阶段主动读取和响应存储状态。

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

✅ 关键逻辑说明

• 页面加载时，立即调用 localStorage.getItem('username') 查询是否已存在用户名；
• 若存在，则立即隐藏表单（display: none）并填充

  内容

  ；
• 若不存在，则保留表单可见，等待用户首次提交；
• 表单提交事件处理保持不变：保存到 localStorage、隐藏自身、更新

  。

✅ 优化后的完整代码（含错误防护与语义增强）

  <meta charset="UTF-8"><title>用户名创建系统</title>

请输入用户名： 提交

—— 请创建您的用户名 ——

<script> const form = document.getElementById('username-creator'); const input = document.getElementById('username-creator-input'); const h1 = document.getElementById('username-container-h1'); // 【初始化】检查 localStorage 中是否已有用户名 const savedUsername = localStorage.getItem('username'); if (savedUsername && typeof savedUsername === 'string' && savedUsername.trim() !== '') { form.style.display = 'none'; h1.textContent = savedUsername.trim(); } // 【交互】监听表单提交 form.addEventListener('submit', function (event) { event.preventDefault(); const username = input.value.trim(); if (username) { localStorage.setItem('username', username); form.style.display = 'none'; h1.textContent = username; } else { alert('用户名不能为空！'); } }); </script>

⚠️ 注意事项

• 不要依赖 DOMContentLoaded 包裹初始化逻辑：本例中直接执行检查是安全的，因为脚本位于 底部，DOM 已就绪；若需前置脚本，应包裹在 document.addEventListener('DOMContentLoaded', ...) 中。
• 数据校验建议增强：示例中增加了 trim() 和空值判断，避免存入空白字符串；你还可以扩展正则校验（如仅允许字母数字下划线）。
• 清除用户名（可选功能）：如需重置，可通过 localStorage.removeItem('username') + 显示表单（form.style.display = 'block'）+ 清空

  实现，适合开发调试或用户注销场景。

该方案简洁、可靠，完全符合前端持久化状态管理的最佳实践，无需后端参与，即可为初学者提供完整的“一次设置、永久生效”的用户体验。