通过 localstorage 持久化存储用户名，并在页面加载时自动检查、隐藏表单并渲染用户名，即可实现表单“永久隐藏”与用户名跨刷新显示。
通过 localstorage 持久化存储用户名，并在页面加载时自动检查、隐藏表单并渲染用户名，即可实现表单“永久隐藏”与用户名跨刷新显示。
要让用户名创建表单在用户提交后彻底隐藏（包括页面刷新后），同时确保已创建的用户名持续显示在 <h1> 容器中，核心在于利用 localStorage 的持久性特性，并在页面初始化阶段主动读取和响应存储状态。
以下是一个完整、健壮的实现方案：
✅ 关键逻辑说明
- 页面加载时，立即调用 localStorage.getItem('username') 查询是否已存在用户名；
- 若存在，则立即隐藏表单（display: none）并填充 <h1> 内容；
- 若不存在，则保留表单可见，等待用户首次提交；
- 表单提交事件处理保持不变：保存到 localStorage、隐藏自身、更新 <h1>。
✅ 优化后的完整代码（含错误防护与语义增强）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>用户名创建系统</title>
</head>
<body>
<form id="username-creator" class="username-creator">
<label for="username-creator-input">请输入用户名：</label>
<input type="text" id="username-creator-input" required minlength="2" maxlength="20">
<button type="submit">提交</button>
</form>
<div id="username-container">
<h1 id="username-container-h1">—— 请创建您的用户名 ——</h1>
</div>
<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>
</body>
</html>⚠️ 注意事项
- 不要依赖 DOMContentLoaded 包裹初始化逻辑：本例中直接执行检查是安全的，因为脚本位于 <body> 底部，DOM 已就绪；若需前置脚本，应包裹在 document.addEventListener('DOMContentLoaded', ...) 中。
- 数据校验建议增强：示例中增加了 trim() 和空值判断，避免存入空白字符串；你还可以扩展正则校验（如仅允许字母数字下划线）。
- 清除用户名（可选功能）：如需重置，可通过 localStorage.removeItem('username') + 显示表单（form.style.display = 'block'）+ 清空 <h1> 实现，适合开发调试或用户注销场景。
该方案简洁、可靠，完全符合前端持久化状态管理的最佳实践，无需后端参与，即可为初学者提供完整的“一次设置、永久生效”的用户体验。
