Shopify环境下sessionStorage失效求助：弹窗刷新后重复显示

问题描述 #

尝试用sessionStorage实现弹窗在每个浏览器会话仅显示一次，弹窗能正常显示并在2秒后删除，但刷新页面后会重复出现。已通过控制台确认sessionStorage中的AnnouncementOnce token已被记录，怀疑是否Shopify会在每次刷新时清空sessionStorage，寻求解决方案。

现有代码 #

if (sessionStorage.getItem('AnnouncementOnce') !== 'true') {
    function popupwin(){
        document.getElementById("myNav").style.width = "100%";
    }
sessionStorage.setItem('AnnouncementOnce','true');
}

var delay = ( function() {
    var timer = 0;
    return function(callback, ms) {
        clearTimeout (timer);
        timer = setTimeout(callback, ms);
    };
})();

delay(function(){
    const element = document.getElementById("myPopup");
    element.remove();
}, 2000 );

问题原因 #

1. 核心逻辑漏洞：你在if块内仅定义了popupwin函数但从未调用，且没有通过sessionStorage控制弹窗的初始显示状态。如果弹窗元素（#myNav）默认是显示在页面中的，即使sessionStorage存在标记，刷新后弹窗依然会默认出现，你的代码没有阻止这个行为。
2. Shopify不会清空sessionStorage：sessionStorage的生命周期是浏览器会话（标签页从打开到关闭），Shopify平台不会主动清空该存储，问题不在平台，而是代码逻辑错误。
3. 无判断的删除逻辑：当前代码不管弹窗是否被sessionStorage控制显示，都会在2秒后执行删除操作，可能导致不必要的DOM操作错误（比如元素已被删除时再次调用remove()）。

解决方案 #

调整代码逻辑，通过sessionStorage直接控制弹窗的显示/隐藏，确保只有首次会话才显示弹窗：

// 获取弹窗元素
const popupNav = document.getElementById("myNav");
const popupElement = document.getElementById("myPopup");

if (sessionStorage.getItem('AnnouncementOnce') !== 'true') {
    // 首次会话：显示弹窗并标记状态
    popupNav.style.width = "100%";
    sessionStorage.setItem('AnnouncementOnce','true');
    
    // 2秒后删除弹窗，增加元素存在判断避免报错
    setTimeout(() => {
        popupElement?.remove();
    }, 2000);
} else {
    // 非首次会话：直接隐藏并移除弹窗
    popupNav.style.width = "0";
    popupElement?.remove();
}

关键修改点 #

• 直接在if块内执行弹窗显示逻辑，移除未调用的冗余函数定义
• 增加else分支，当sessionStorage存在标记时，直接隐藏/删除弹窗，避免刷新后弹窗默认显示
• 增加元素存在性判断（可选链操作符?.），防止DOM操作报错
• 简化延迟删除逻辑，无需复杂防抖函数（非必要场景下）

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