使用JavaScript和LocalStorage实现HTML弹窗只显示一次
在网页开发中，我们经常会遇到弹窗需求，比如活动通知、用户引导弹窗等。很多时候我们希望弹窗只对用户显示一次，避免重复弹出影响用户体验。实现这个需求的核心思路是：结合前端弹窗的显示隐藏逻辑和LocalStorage的本地存储能力，记录用户的弹窗交互状态。
一、实现原理
LocalStorage是浏览器提供的本地存储API，数据会保存在用户的浏览器中，除非主动清除，否则会一直存在。我们可以通过以下步骤实现弹窗只显示一次：
页面加载时，先检查LocalStorage中是否存在标记弹窗已显示的键
如果不存在该键，说明用户是首次访问，显示弹窗，同时在LocalStorage中写入标记
如果存在该键，说明用户已经看过弹窗，直接隐藏弹窗
弹窗关闭时同样更新标记，确保后续不再显示
二、基础实现示例
下面是一个完整的实现示例，包含HTML弹窗结构和对应的JavaScript逻辑：
1. HTML结构
首先创建弹窗的基础结构，使用<div>标签作为弹窗容器，内部包含提示内容和关闭按钮：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹窗只显示一次示例</title>
<style>
.modal-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
}
.modal-content {
width: 300px;
padding: 20px;
background: #fff;
border-radius: 8px;
text-align: center;
}
.close-btn {
margin-top: 15px;
padding: 8px 20px;
background: #409eff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="modal-mask" id="modalMask">
<div class="modal-content">
<h3>欢迎访问本站</h3>
<p>这是首次访问的专属提示，后续将不会再显示~</p>
<button class="close-btn" id="closeBtn">我知道了</button>
</div>
</div>
<script>
// 后续JavaScript逻辑写在这里
</script>
</body>
</html>2. JavaScript逻辑实现
接下来编写控制弹窗显示和LocalStorage读写的逻辑：
// 定义存储弹窗状态的键名
const MODAL_SHOWN_KEY = 'isModalShown';
// 获取DOM元素
const modalMask = document.getElementById('modalMask');
const closeBtn = document.getElementById('closeBtn');
// 页面加载时检查弹窗状态
window.addEventListener('load', function() {
// 从LocalStorage中读取标记
const isModalShown = localStorage.getItem(MODAL_SHOWN_KEY);
// 如果标记不存在，说明是首次访问，显示弹窗
if (!isModalShown) {
modalMask.style.display = 'flex';
// 写入标记到LocalStorage，表示弹窗已经显示过
localStorage.setItem(MODAL_SHOWN_KEY, 'true');
}
});
// 关闭按钮点击事件
closeBtn.addEventListener('click', function() {
// 隐藏弹窗
modalMask.style.display = 'none';
// 再次确认标记已写入，避免异常情况下重复显示
if (!localStorage.getItem(MODAL_SHOWN_KEY)) {
localStorage.setItem(MODAL_SHOWN_KEY, 'true');
}
});三、功能扩展
上面的基础示例实现了弹窗永久只显示一次，实际开发中可能需要更灵活的逻辑，比如设置弹窗有效时间，过期后重新显示：
1. 带有效期的弹窗实现
我们可以在LocalStorage中存储时间戳，判断当前时间是否超过有效期：
const MODAL_SHOWN_KEY = 'modalInfo';
// 设置弹窗有效期为7天，单位毫秒
const EXPIRE_TIME = 7 * 24 * 60 * 60 * 1000;
window.addEventListener('load', function() {
const modalMask = document.getElementById('modalMask');
const closeBtn = document.getElementById('closeBtn');
const modalInfoStr = localStorage.getItem(MODAL_SHOWN_KEY);
let needShowModal = true;
if (modalInfoStr) {
try {
const modalInfo = JSON.parse(modalInfoStr);
const now = Date.now();
// 如果存储的时间戳未过期，不需要显示弹窗
if (now - modalInfo.timestamp < EXPIRE_TIME) {
needShowModal = false;
}
} catch (e) {
// 解析失败，视为首次访问
needShowModal = true;
}
}
if (needShowModal) {
modalMask.style.display = 'flex';
}
closeBtn.addEventListener('click', function() {
modalMask.style.display = 'none';
// 存储当前时间戳和状态
const modalInfo = {
timestamp: Date.now(),
shown: true
};
localStorage.setItem(MODAL_SHOWN_KEY, JSON.stringify(modalInfo));
});
});四、注意事项
LocalStorage的存储容量一般为5MB左右，不要存储过大的数据
如果用户在浏览器中清除本地存储，弹窗会再次显示，这是符合预期的默认行为
LocalStorage仅在客户端生效，无法实现跨浏览器、跨设备的状态同步
敏感信息不要存储在LocalStorage中，避免XSS攻击导致信息泄露
如果需要在用户关闭弹窗后允许其手动再次触发弹窗，可以额外添加一个触发按钮，点击时清除LocalStorage中的对应标记即可
通过上述方法，我们可以快速实现HTML弹窗只显示一次的需求，既提升了用户体验，也减少了不必要的干扰。开发者可以根据实际业务场景，灵活调整有效期、存储内容等逻辑。