通过 localstorage 记录用户关闭弹窗的状态，可在页面重新加载、浏览器前进/后退时持久化隐藏弹窗，确保每个用户仅看到一次。
在 Web 开发中，实现“仅显示一次的弹窗”是一个常见需求——尤其适用于新手引导、营销提示或隐私声明。但仅靠 JavaScript 内存变量（如布尔标志）无法跨页面生命周期生效：一旦刷新、跳转或点击浏览器后退按钮，状态即丢失。localStorage 是解决该问题的核心方案，它在同源下持久存储字符串数据，且不受页面卸载影响。
✅ 正确实现步骤
- 页面加载时检查状态：读取 localStorage 中的标记（如 'closeMe'），若值为 'yes'，则直接隐藏弹窗；
- 关闭时持久化记录：用户点击关闭按钮后，写入 localStorage 并同步隐藏弹窗；
- CSS 配合控制显隐：避免直接操作 style.display，推荐用 CSS class 控制，更易维护、支持过渡动画。
✅ 修正后的完整代码
<div id="popup">
<div id="close">×</div>
MY CONTENT
</div>
<style>
#popup { display: block; } /* 默认显示 */
#popup.closeMe { display: none; }
/* 可选：添加淡出动画 */
#popup.closeMe { opacity: 0; transition: opacity 0.3s ease; }
</style>
<script>
// 页面加载时检查是否已关闭过
if (localStorage.getItem('closeMe') === 'yes') {
document.getElementById('popup').classList.add('closeMe');
}
// 绑定关闭按钮事件
document.getElementById('close').addEventListener('click', function () {
localStorage.setItem('closeMe', 'yes');
document.getElementById('popup').classList.add('closeMe');
});
</script>⚠️ 注意事项
- ID 与选择器需一致：原代码中 document.querySelector(".popup") 错误地使用了类选择器 .popup，但 HTML 中是 id="popup"，应统一用 getElementById('popup') 或 querySelector('#popup')；
- 不要依赖 window.load 延迟显示：原逻辑中 setTimeout(..., 0) 强制显示弹窗，会与 localStorage 判断冲突；应优先判断状态，再决定是否显示；
- 兼容性无忧：localStorage 在所有现代浏览器（含 iOS Safari、Android Chrome）中均被广泛支持；
- 清除策略可选：如需重置（例如调试或活动周期更新），可通过 localStorage.removeItem('closeMe') 或开发者工具 Application → Storage 手动清理。
通过这一方案，弹窗真正实现“用户级单次展示”——无论刷新、关闭标签页、从其他网站返回，甚至重启浏览器，只要未手动清除本地存储，弹窗将始终处于隐藏状态。
