通过 localstorage 记录用户关闭行为，确保弹窗对每个用户仅显示一次，即使页面刷新、关闭后重新打开或点击浏览器后退按钮也能持久生效。
在 Web 开发中，实现“每个用户仅显示一次”的弹窗（如欢迎提示、活动公告）是一个常见需求。但仅靠 JavaScript 内存变量（如 let shown = false）无法跨页面生命周期生效——页面刷新、跳转或点击浏览器后退/前进按钮都会重置状态。真正的解决方案是借助客户端持久化存储机制，其中 localStorage 是最轻量、兼容性好且无需后端配合的理想选择。
✅ 正确实现逻辑
- 页面加载时检查状态：读取 localStorage 中标记（如 'closeMe': 'yes'），若存在则直接隐藏弹窗；
- 用户主动关闭时写入状态：点击关闭按钮后，将标记写入 localStorage，并同步隐藏弹窗；
- CSS 控制显隐：避免直接操作 style.display，推荐用 CSS 类（如 .closeMe { display: none; }）实现样式解耦，更易维护且支持过渡动画。
✅ 完整可运行代码示例
<div id="popup">
<div id="close">×</div>
<p>欢迎回来！这是您首次访问时看到的专属提示。</p>
</div>
<style>
#popup {
position: fixed;
top: 20%;
left: 50%;
transform: translateX(-50%);
background: white;
padding: 24px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 1000;
width: 90%;
max-width: 400px;
}
#close {
float: right;
font-size: 24px;
cursor: pointer;
line-height: 1;
}
.closeMe {
display: none !important;
}
</style>
<script>
// 页面加载时检查是否已关闭过
if (localStorage.getItem('popupClosed') === 'yes') {
document.getElementById('popup').classList.add('closeMe');
} else {
// 首次访问：延时显示（模拟“进入后弹出”效果）
setTimeout(() => {
document.getElementById('popup').style.display = 'block';
}, 300);
}
// 绑定关闭按钮事件
document.getElementById('close').addEventListener('click', function () {
const popup = document.getElementById('popup');
popup.classList.add('closeMe');
localStorage.setItem('popupClosed', 'yes');
});
</script>⚠️ 注意事项
- 不要混用 querySelector 和 ID 选择器错误：原代码中 document.querySelector(".popup") 查找的是类名为 popup 的元素，但实际 HTML 中是 id="popup"，应统一为 getElementById('popup') 或 querySelector('#popup')；
- 避免重复写入 localStorage：只需在关闭时设置一次，无需在检查逻辑中再次调用 setItem；
- 兼容性无忧：localStorage 在所有现代浏览器（含 iOS Safari、Android Chrome）中均被广泛支持（IE8+）；
- 隐私模式需降级处理：部分浏览器在无痕模式下会禁用 localStorage，建议增加 try...catch 包裹写入逻辑，失败时可回退至 sessionStorage 或仅本次有效（非必需，但属健壮性优化）。
通过以上方案，弹窗真正实现了「用户级、跨会话、抗刷新」的一致体验，无需服务端参与，简洁高效，适合绝大多数静态站点或轻量级应用。
