可通过document.cookie设置first_visit=1并设max-age或expires来标记首次访问，页面加载时检查该Cookie存在与否决定是否弹窗；Cookie受限时可降级使用localStorage。
可以通过 JavaScript 操作 document.cookie 记录用户是否已访问过，从而控制首次访问时显示弹窗提示。核心思路是：首次访问时设置一个带过期时间的 Cookie；后续访问先读取该 Cookie，若存在则不显示弹窗。
判断并设置首次访问标识
在页面加载时检查特定 Cookie 是否存在。如果不存在，说明是首次访问，可显示弹窗，并立即写入 Cookie 标记已访问。
- 使用
document.cookie读取所有 Cookie 字符串，再用字符串方法（如includes或正则）查找指定键名 - 写入 Cookie 时需指定
path=/（确保全站可读），建议加上max-age（如 30 天 = 2592000 秒）或expires - 避免中文或特殊字符，键名推荐用英文小写，如
first_visit=1
简单可靠的检测写法示例
以下代码可直接放入 <script> 中：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
function hasVisited() {
return document.cookie.includes('first_visit=1');
}
<p>if (!hasVisited()) {
// 显示首次访问弹窗（例如用 alert、自定义 modal 等）
alert('欢迎首次访问！');</p><p>// 设置 Cookie，有效期 30 天
const date = new Date();
date.setTime(date.getTime() + 30 <em> 24 </em> 60 <em> 60 </em> 1000);
document.cookie = 'first_visit=1; path=/; expires=' + date.toUTCString();
}注意浏览器隐私限制影响
部分场景下 Cookie 可能不可用或被拦截：
立即学习“Java免费学习笔记（深入）”；
- 在无痕模式或禁用 Cookie 的浏览器中，
document.cookie可能为空或只读 - iOS Safari 和新版 Chrome 对第三方上下文或跨域 iframe 有更严的 Cookie 限制
- 若网站启用了 Strict 或 Lax 的
SameSite策略，需确保设置时路径和上下文匹配
替代方案（兼容性更强）
当 Cookie 不可靠时，可结合 localStorage 作为降级方案：
- 优先尝试读写 Cookie，失败则 fallback 到
localStorage.setItem('first_visit', '1') -
localStorage不受 SameSite 限制，但无法跨二级域名共享，且用户清除本地数据后会重置 - 对纯前端静态站点，
localStorage往往更稳定；对需要服务端校验的场景，仍建议以 Cookie 为主
