Angular应用如何正确追踪页面重载状态并控制模板元素显示

首先明确sessionStorage的原生特性，不需要额外编写关闭窗口的清除逻辑：

• 同标签页刷新保留数据：同一标签页下触发页面刷新时，sessionStorage存储的数据会完整保留
• 关页/关浏览器自动清空：关闭标签页/整个浏览器时，sessionStorage会被浏览器自动清空，天然满足变量清除需求

原有代码问题 #

• 自定义存储字段为refreshCount计数，和需求要求的isPageReloaded标识不匹配
• 首次打开应用时主动写入refreshCount=0，不符合「首次打开无特殊标识」的要求
• 类型定义模糊，使用any类型存数字，容易出现模板判断的隐式类型错误

调整后代码 #

TS 逻辑部分 #

将代码放在全局根组件（如app.component.ts）即可全局生效，若仅需单个组件使用放在对应组件中即可：

// 明确定义为布尔类型，避免类型混乱
isPageReloaded = false;

constructor() {
  // 读取重载标识
  const reloadFlag = sessionStorage.getItem('isPageReloaded');
  // 标识存在且值为true时，判定为页面重载场景
  this.isPageReloaded = reloadFlag === 'true';
  // 读取后立刻移除标识，保证非重载场景下sessionStorage无该字段
  if (reloadFlag !== null) {
    sessionStorage.removeItem('isPageReloaded');
  }
}

@HostListener('window:beforeunload')
onPageUnload() {
  // 页面卸载前写入重载标识：刷新场景下会被下一次初始化读取，关闭场景下随会话销毁
  sessionStorage.setItem('isPageReloaded', 'true');
}

HTML 模板部分 #

直接通过变量控制指定元素的显示隐藏：

<!-- 仅页面重载场景下显示该元素 -->
<div *ngIf="isPageReloaded">
  页面重载后需要展示的内容
</div>

逻辑校验 #

• 首次打开场景：新开标签页/启动浏览器进入应用时，sessionStorage中无isPageReloaded字段，变量判定为false，指定元素不显示，符合无特殊标识的要求；初始化完成后也不会残留该字段
• 页面重载场景：触发刷新时会先执行beforeunload逻辑写入isPageReloaded=true，页面重载后同标签页sessionStorage保留该字段，初始化时读取到true，指定元素显示；读取完成后立刻移除该字段，不会在当前会话残留
• 关闭窗口/浏览器场景：beforeunload写入字段后，标签页会话销毁，sessionStorage被浏览器整体清空，下次进入时无任何残留数据，符合自动清除要求

注：浏览器未提供可100%可靠区分「刷新页面」和「关闭窗口」的前端API，本方案完全依托sessionStorage的原生生命周期特性实现，无需额外做场景判断，兼容所有主流浏览器。

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