这里的 "jq" 通常指的是 jQuery，一个流行的 JavaScript 库，虽然我们可以用纯 JavaScript 实现，但使用 jQuery 可以让代码更简洁、更易于理解。
（图片来源网络，侵删）
实现这个功能的核心思路是利用浏览器的 localStorage 或 sessionStorage，这两种存储方式都可以在用户的浏览器中保存数据，非常适合用来记录“是否是第一次访问”。
localStorage: 数据永久存储，除非用户主动清除浏览器数据或我们手动删除，适合“只在新用户或长期未访问的用户面前显示广告”的场景。sessionStorage: 数据在当前会话（即浏览器标签页关闭前）有效，适合“只在每个会话开始时显示一次广告”的场景。
下面我将提供两种最常用、最可靠的实现方案，并附上完整的代码示例。
使用 localStorage（最常用）
这种方法会在用户首次访问网站或清除浏览器缓存后再次访问时弹出广告，这是商业网站最常用的方式。
实现原理：
- 页面加载时,检查
localStorage中是否存在一个特定的标记（hasVisited）。 - 如果不存在这个标记，说明是第一次访问，则显示广告。
- 显示广告后,立即向
localStorage中写入这个标记，这样下次访问时就不会再显示了。 - 如果存在这个标记，则不执行任何操作。
完整代码示例：
假设你的广告是一个简单的 div 元素。
（图片来源网络，侵删）
HTML 结构
在 <body> 标签内添加你的广告弹窗，我们给它一个 id 方便 jQuery 选中，并默认设置为隐藏。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">我的网站</title>
<!-- 引入 jQuery 库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
/* 你的网站样式 */
body { font-family: sans-serif; }
h1 { color: #333; }
/* 广告弹窗样式 */
#ad-popup {
position: fixed; /* 固定在视口 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 居中显示 */
background-color: #fff;
padding: 20px;
border: 2px solid #007bff;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
z-index: 9999; /* 确保在最上层 */
text-align: center;
display: none; /* 默认隐藏 */
}
#ad-popup h2 {
margin-top: 0;
color: #007bff;
}
#ad-popup button {
margin-top: 15px;
padding: 8px 16px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
#ad-popup button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是网站的主要内容。</p>
<!-- 广告弹窗 -->
<div id="ad-popup">
<h2>🎉 欢迎新用户！</h2>
<p>首次访问，我们为您准备了一个专属优惠！</p>
<button id="close-ad">关闭</button>
</div>
<script>
$(document).ready(function(){
// 定义存储的键名
const storageKey = 'hasVisitedWebsite';
// 检查 localStorage 中是否存在标记
if (!localStorage.getItem(storageKey)) {
// 如果不存在，说明是第一次访问
$('#ad-popup').fadeIn(500); // 使用淡入效果显示广告
// 当用户点击关闭按钮时
$('#close-ad').on('click', function(){
$('#ad-popup').fadeOut(500); // 淡出效果
// 将标记存入 localStorage
localStorage.setItem(storageKey, 'true');
});
}
// 如果存在标记，则什么都不做，广告保持隐藏
});
</script>
</body>
</html>
使用 sessionStorage（按会话）
这种方法只会在用户打开新的浏览器标签页或窗口时弹出广告，如果用户刷新页面，广告不会再次弹出。
实现原理：
与 localStorage 基本相同，只是将存储介质从 localStorage 换成了 sessionStorage。
（图片来源网络，侵删）
代码修改：
你只需要将上面代码中的 localStorage 替换为 sessionStorage 即可。
$(document).ready(function(){
// 将 localStorage 改为 sessionStorage
const storageKey = 'hasVisitedInSession';
if (!sessionStorage.getItem(storageKey)) {
$('#ad-popup').fadeIn(500);
$('#close-ad').on('click', function(){
$('#ad-popup').fadeOut(500);
// 将标记存入 sessionStorage
sessionStorage.setItem(storageKey, 'true');
});
}
});
进阶与注意事项
-
广告来源
- 静态HTML：如上例所示，广告内容直接写在HTML里，适合简单、固定的广告。
- 动态加载：更专业的做法是通过 AJAX 请求从服务器获取广告内容，这样可以实现广告的轮换、A/B测试等。
AJAX 加载广告示例:
if (!localStorage.getItem(storageKey)) { // 使用 jQuery 的 get 方法请求广告内容 $.get('ad-content.html', function(data){ // 将获取到的广告内容插入到页面中 $('#ad-popup').html(data).fadeIn(500); }); $('#ad-popup').on('click', '#close-ad', function(){ // 事件委托，因为内容是动态加载的 $('#ad-popup').fadeOut(500); localStorage.setItem(storageKey, 'true'); }); } -
用户体验
- 提供关闭按钮：这是必须的，尊重用户的选择权。
- 不要过度打扰：“第一次打开”的定义要把握好，避免让老用户感到厌烦。
- 动画效果：使用
fadeIn/fadeOut或slide效果，比直接显示/隐藏更友好。
-
兼容性
localStorage和sessionStorage是 HTML5 的标准，目前所有现代浏览器都支持，如果你的网站需要支持非常古老的浏览器（如 IE6 及以下），则需要使用cookies作为替代方案，但操作会更复杂。
| 特性 | localStorage |
sessionStorage |
|---|---|---|
| 生命周期 | 永久，除非手动清除 | 当前会话（标签页/窗口关闭） |
| 适用场景 | 新用户欢迎弹窗、活动通知 | 每次进入网站时的提示、功能引导 |
| 代码差异 | localStorage.setItem() |
sessionStorage.setItem() |
| 推荐度 | ⭐⭐⭐⭐⭐ (最常用) | ⭐⭐⭐⭐ (按需使用) |
对于绝大多数“第一次打开网页弹出广告”的需求，方案一（使用 localStorage） 是最标准和最佳的选择，你可以直接复制上面的完整代码，并根据你的广告内容和样式进行修改。
