如何使用Javascript结合session state在两个不同页面展示弹出框

核心调整思路 #

原来的实现是用全局唯一的sessionStorage标记控制横幅展示，所以全站点会话内仅展示一次。现在只需要把全局标记拆分为首页和分类页两个独立的标记，两类页面的展示状态互不干扰即可。

完整实现代码 #

// 页面加载完成后执行逻辑
window.addEventListener('load', () => {
  // 1. 判断当前页面类型，可根据自身站点路由规则修改匹配逻辑
  const path = window.location.pathname
  let bannerKey = ''
  if (path === '/' || path === '/index.html') {
    // 匹配首页
    bannerKey = 'homeBannerShown'
  } else if (path.startsWith('/category/')) {
    // 匹配分类页，路径前缀可根据实际路由规则调整
    bannerKey = 'categoryBannerShown'
  }

  // 2. 不属于需要展示横幅的页面，直接终止逻辑
  if (!bannerKey) return

  // 3. 检查当前页面类型的横幅是否已展示过，未展示则弹出
  if (!sessionStorage.getItem(bannerKey)) {
    // 此处替换为你自己的横幅展示逻辑
    showBanner()
    // 标记当前类型页面的横幅已展示，会话内不再弹出
    sessionStorage.setItem(bannerKey, 'true')
  }
})

// 示例：你的横幅展示方法
function showBanner() {
  const banner = document.querySelector('.global-banner')
  if (banner) banner.style.display = 'block'
}

扩展说明 #

• 如果需要每个独立分类页都单独弹出一次横幅，可以把分类的唯一标识（比如分类ID、分类别名）拼入bannerKey，示例：bannerKey = categoryBanner_${categoryId}_shown``
• 如果需要调整展示时长限制到跨会话，可以改用localStorage存储标记，同时存入过期时间戳，判断时增加过期校验即可。

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