如何实现Modal仅在打开浏览器页面时显示一次，而非每次返回页面弹出

原代码可行性 #

你写的这段代码是可以实现需求的。sessionStorage本身的生命周期和当前浏览器会话绑定：只要你不关闭当前站点的标签页/整个浏览器，不管是页面刷新、前进后退、还是跳转到其他同站页面再返回，sessionStorage里存储的值都会保留，只有关闭站点再重新打开时才会清空，刚好匹配你要的「会话内仅弹出一次、关闭重开再次展示」的要求。

优化方案 #

可以从以下几个方面优化代码，提升鲁棒性和可维护性：

• 键名加统一前缀：直接用页面路径当storage的键容易和其他业务逻辑的存储键冲突，建议加专属前缀区分弹窗相关的存储字段
• 增加异常捕获：部分用户的浏览器会在隐私模式下禁用本地存储，不加捕获的话可能导致代码报错，影响页面其他功能正常运行
• 优化存储值语义：用布尔类标识代替固定字符串，逻辑判断更清晰直观
• 封装为通用函数：方便多页面复用同逻辑，后续调整规则也不需要改多处代码

优化后代码示例

// 判断当前页面是否需要展示弹窗
function checkModalShouldShow() {
  // 异常捕获，处理存储被禁用的情况
  try {
    const storageKey = `modal_has_shown_${window.location.pathname}`;
    const hasShown = sessionStorage.getItem(storageKey);
    if (hasShown) {
      console.log("当前会话已展示过弹窗，不再展示");
      return false;
    }
    sessionStorage.setItem(storageKey, "true");
    console.log("首次加载，展示弹窗");
    return true;
  } catch (e) {
    // 存储不可用时默认每次都展示弹窗，也可以根据业务需求改成默认不展示
    console.log("本地存储不可用，默认展示弹窗");
    return true;
  }
}

// 调用示例：返回true的时候执行你的弹窗展示逻辑
if (checkModalShouldShow()) {
  // 这里写调用Modal组件展示的代码
}

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