如何实现登录成功提示div单次会话仅展示一次，无需使用jQuery

解决方案 #

核心是通过sessionStorage标记提示的展示状态，控制仅登录成功后的首次页面加载触发展示逻辑，具体实现步骤如下：

• 第一步：登录成功时写入待展示标记
  在登录接口请求成功、跳转页面前，给sessionStorage存入标识，标记当前会话需要展示登录成功提示：

  // 登录成功回调内添加
  sessionStorage.setItem('showLoginSuccess', '1')
  // 后续执行跳转首页等逻辑
  

• 第二步：全局页面加载时判断展示逻辑
  在所有页面都引入的公共JS中加入如下逻辑，DOM加载完成后判断标记状态，仅当标记为待展示时才触发提示显示，4秒隐藏后立即更新标记：

  document.addEventListener('DOMContentLoaded', function() {
    const successTip = document.getElementById('success')
    const needShowTip = sessionStorage.getItem('showLoginSuccess') === '1'
    if (needShowTip) {
      // 显示提示
      successTip.style.display = 'block'
      // 4秒后隐藏并更新标记
      setTimeout(() => {
        successTip.style.display = 'none'
        sessionStorage.setItem('showLoginSuccess', '0')
      }, 4000)
    } else {
      // 不需要展示时直接隐藏，避免页面跳转时提示闪现
      successTip.style.display = 'none'
    }
  })
  

• 第三步：登出时清除标记
  在用户登出的回调逻辑中移除对应标记，保证下次重新登录可以正常触发提示：

  // 登出回调内添加
  sessionStorage.removeItem('showLoginSuccess')
  

之前使用sessionStorage失效的原因排查 #

你之前遇到提示展示后立刻隐藏的问题，通常是两种情况导致：

1. 提前修改了sessionStorage的标记值，还没等定时器走完就触发了隐藏逻辑
2. 没有在非展示场景下主动隐藏提示div，导致页面渲染时先显示了默认样式，再被逻辑隐藏，看起来就像立刻消失

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