如何阻止Blazor WebAssembly应用在新标签页打开时重新加载？

核心思路是让新标签页能识别已有会话状态，跳过加载流程，以下是几种实操方案：

1. 用localStorage标记已完成加载 #

• 首次加载完成后，在localStorage中存入状态标记：

  // 加载流程完成后执行
  localStorage.setItem('hasLoaded', 'true');
  

• 页面初始化时先检查标记，决定是否跳过加载：

  window.addEventListener('DOMContentLoaded', () => {
    if (localStorage.getItem('hasLoaded') === 'true') {
      hideLoadingScreen(); // 自定义隐藏加载界面的方法
    } else {
      // 执行加载流程，完成后设置标记
      runLoadingProcess().then(() => {
        localStorage.setItem('hasLoaded', 'true');
        hideLoadingScreen();
      });
    }
  });
  

• 补充：如果站点有登出流程，要同步清除这个标记，避免用户登出后打开新标签页仍跳过加载。

2. 利用Cookie传递会话状态 #

• 逻辑和localStorage类似，但Cookie会随请求自动发送，适合需要服务端配合的场景：
  • 加载完成后设置Cookie：

    document.cookie = "sessionLoaded=true; path=/; max-age=86400";
    

  • 页面初始化时读取Cookie判断：

    function checkLoadedCookie() {
      return document.cookie.split(';').some(item => item.trim().startsWith('sessionLoaded='));
    }
    
    if (checkLoadedCookie()) {
      hideLoadingScreen();
    } else {
      // 执行加载流程并设置Cookie
    }
    

3. 跨标签页实时通信（BroadcastChannel） #

• 若希望新标签页立刻感知当前活跃会话，可使用BroadcastChannel实现实时同步：
  • 主标签页加载完成后发送广播：

    const channel = new BroadcastChannel('sessionChannel');
    channel.postMessage({ type: 'LOAD_COMPLETE' });
    

  • 新标签页初始化时监听广播，同时用localStorage做兜底：

    const channel = new BroadcastChannel('sessionChannel');
    let hasSkipped = false;
    
    channel.addEventListener('message', (e) => {
      if (e.data.type === 'LOAD_COMPLETE' && !hasSkipped) {
        hideLoadingScreen();
        hasSkipped = true;
      }
    });
    
    // 兜底逻辑：避免广播未及时接收的情况
    if (localStorage.getItem('hasLoaded') === 'true') {
      hideLoadingScreen();
      hasSkipped = true;
    }
    

注意事项 #

• 若加载流程涉及服务端会话验证，需配合服务端逻辑（比如首次加载后标记会话状态，新标签页请求时携带会话ID验证）。
• 需测试隐私浏览模式的兼容性，部分浏览器在隐私模式下对localStorage和Cookie的存储规则有限制。

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