同一页面仅显示一次jQuery弹窗功能异常求助

看起来你遇到的核心问题是：同一页面刷新时弹窗反复弹出，而期望是每个页面仅在首次刷新时显示一次弹窗，切换到其他页面后新页面仍能触发一次弹窗。我先帮你分析下原有代码的问题，再给出可行的解决方案。

原代码的问题分析 #

1. 计数器方案失效原因 #

你的计数器代码每次页面刷新时，var counter = 0;都会重新初始化——也就是说，每次刷新页面，counter都会回到0，然后执行counter++变成1，所以每次都会触发setInterval。更糟的是，setInterval会每隔1.5秒重复调用弹窗显示逻辑，这就是弹窗反复出现的直接原因。

2. Cookie方案失效原因 #

你用Cookie的思路是对的，但可能存在这几个问题：

• 没有针对每个页面独立设置Cookie标识，如果多个页面共享同一个Cookie名，切换页面后Cookie已经存在，新页面就不会显示弹窗了；
• 可能没有设置Cookie的path属性，导致Cookie的作用域覆盖了所有页面；
• 代码里的fadeout()拼写错误，jQuery的方法是大写O的fadeOut()。

可行解决方案 #

方案一：使用sessionStorage（推荐） #

sessionStorage是浏览器的会话存储，每个标签页独立存储数据，关闭标签后数据会清空。非常适合你的需求：每个页面首次刷新显示弹窗，切换页面后新页面的sessionStorage是全新的，会重新触发弹窗。

$(document).ready(function() {
    // 用当前页面的路径作为唯一标识，确保每个页面的弹窗状态独立
    const pagePopupKey = 'popup_shown_' + window.location.pathname;

    // 检查当前页面是否已经显示过弹窗
    if (!sessionStorage.getItem(pagePopupKey)) {
        // 仅执行一次弹窗显示（用setTimeout而不是setInterval）
        setTimeout(function() {
            $('.popup2, .overlay2').fadeIn();
        }, 1500);

        // 标记当前页面已显示过弹窗
        sessionStorage.setItem(pagePopupKey, 'true');
    } else {
        // 已显示过弹窗，直接隐藏
        $('.popup2, .overlay2').fadeOut();
    }
});

方案二：使用Cookie（兼容旧浏览器） #

如果需要兼容不支持sessionStorage的旧浏览器，可以用Cookie实现，核心是给每个页面设置独立的Cookie，并指定路径：

// 先封装原生Cookie操作函数（如果没引入jQuery Cookie插件）
function getCookie(name) {
    const value = "; " + document.cookie;
    const parts = value.split("; " + name + "=");
    if (parts.length === 2) return parts.pop().split(";").shift();
}

function setCookie(name, value, options = {}) {
    let cookieStr = `${name}=${value}`;
    if (options.path) cookieStr += `; path=${options.path}`;
    // 设置为会话Cookie（关闭浏览器失效）
    document.cookie = cookieStr;
}

$(document).ready(function() {
    const pagePopupKey = 'popup_shown_' + window.location.pathname;

    if (!getCookie(pagePopupKey)) {
        setTimeout(function() {
            $('.popup2, .overlay2').fadeIn();
        }, 1500);

        // 给当前页面路径设置专属Cookie
        setCookie(pagePopupKey, 'true', { path: window.location.pathname });
    } else {
        $('.popup2, .overlay2').fadeOut();
    }
});

关键注意点 #

• 用setTimeout替代setInterval：前者仅执行一次弹窗显示，后者会反复触发，这是弹窗反复出现的核心原因之一；
• 给每个页面设置独立的标识：通过window.location.pathname区分不同页面，确保切换页面后新页面能重新触发弹窗；
• 持久化存储状态：不能用普通变量，因为页面刷新后变量会重置，必须用sessionStorage、localStorage或Cookie来保存状态。

内容的提问来源于stack exchange，提问作者user11692616