本文介绍如何利用浏览器 localstorage 持久化记录用户行为，确保弹窗仅首次访问时显示，即使刷新页面、关闭标签页或通过浏览器后退按钮返回，弹窗也不会重复出现。

在 Web 开发中，实现“仅显示一次”的用户提示（如欢迎弹窗、公告栏或引导层）是一个常见需求。但仅靠 JavaScript 内存变量（如 let shown = false）无法跨页面生命周期生效——一旦刷新或跳转，状态即丢失。此时，localStorage 是最轻量、兼容性好且无需后端支持的解决方案。

✅ 核心思路

利用 localStorage 存储一个布尔标记（如 'popupShown': 'true'），在页面加载时检查该标记：若存在，则隐藏弹窗；若不存在，则显示弹窗，并在用户点击关闭时写入标记。

✅ 完整可运行代码示例

  ×
  
欢迎访问！此弹窗仅显示一次。

⚠️ 注意事项

• localStorage 作用域限制：数据绑定在协议+域名+端口上（如 https://example.com），同源下所有页面共享，符合“每用户一次”的需求。
• 避免 DOM 查询失败：务必使用 getElementById 或带存在性校验的 querySelector（如 closeBtn?.addEventListener），防止元素未加载时报错。
• 不要混用 display: none 和 classList：原问题中同时操作 style.display 和 classList 易引发样式冲突，统一用 CSS 类控制显隐更可靠。
• 不推荐 setTimeout(..., 0) 模拟延迟显示：除非有特殊动画逻辑，否则应直接在 DOM 加载后判断并渲染，保证体验一致性。
• 隐私模式兼容性：部分浏览器在无痕窗口中会禁用 localStorage（抛出 QuotaExceededError），建议添加 try-catch：

try {
  localStorage.setItem('popupShown', 'true');
} catch (e) {
  console.warn('localStorage not available — fallback to session-only behavior');
}

✅ 总结

通过 localStorage 记录用户交互状态，是实现“单次弹窗”的标准实践。它无需 Cookie、不依赖服务器、兼容所有现代浏览器（IE8+），且天然支持页面刷新与导航回退场景。只需三步：① 加载时读取标记 → ② 条件控制显隐 → ③ 关闭时写入标记，即可稳定交付预期体验。