Angular 5实现浏览器关闭清除LocalStorage，刷新不清除

这个需求确实有点棘手——既要在浏览器关闭时清掉LocalStorage里的令牌，刷新时保留，又得让新开标签页能正常复用令牌，SessionStorage显然满足不了。我给你分享一个经过实际验证的方案，结合Page Visibility API和标签页计数来实现：

要实现这个效果，我们需要解决两个关键问题：

1. 区分刷新和真正的浏览器关闭：刷新时页面会短暂隐藏后立即重新可见，而浏览器关闭/标签页关闭时页面会一直保持隐藏状态，用Page Visibility API可以捕捉这个差异。
2. 区分单个标签页关闭和整个浏览器关闭：只有当最后一个标签页关闭时，才需要清除令牌，我们用LocalStorage维护一个标签页计数来判断这个场景。

在你的AppComponent中添加以下代码，替换掉你之前的尝试：

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  private cleanupTimer: any;
  // 自定义键名，根据你的实际情况修改
  private tabCountStorageKey = 'activeTabCount';
  private tokenStorageKey = 'authToken';

  ngOnInit() {
    // 初始化标签页计数：每打开一个新标签页，计数+1
    this.initializeTabCount();
    // 监听页面可见性变化事件
    document.addEventListener('visibilitychange', this.handleVisibilityChange.bind(this));
    // 监听页面卸载事件作为 fallback
    window.addEventListener('beforeunload', this.handleBeforeUnload.bind(this));
  }

  private initializeTabCount(): void {
    let currentCount = parseInt(localStorage.getItem(this.tabCountStorageKey)) || 0;
    localStorage.setItem(this.tabCountStorageKey, (currentCount + 1).toString());
  }

  private handleVisibilityChange(): void {
    if (document.visibilityState === 'hidden') {
      // 页面隐藏时启动定时器：1秒后检查是否需要清除令牌
      this.cleanupTimer = setTimeout(() => {
        this.cleanupTokenIfLastTab();
      }, 1000);
    } else {
      // 页面重新可见（比如刷新完成），立即取消清除操作
      if (this.cleanupTimer) {
        clearTimeout(this.cleanupTimer);
        this.cleanupTimer = null;
      }
    }
  }

  private handleBeforeUnload(): void {
    // 页面卸载时更新标签页计数
    this.updateTabCountOnUnload();
  }

  private updateTabCountOnUnload(): void {
    let currentCount = parseInt(localStorage.getItem(this.tabCountStorageKey)) || 0;
    const newCount = currentCount - 1;
    if (newCount <= 0) {
      localStorage.removeItem(this.tabCountStorageKey);
    } else {
      localStorage.setItem(this.tabCountStorageKey, newCount.toString());
    }
  }

  private cleanupTokenIfLastTab(): void {
    const currentCount = parseInt(localStorage.getItem(this.tabCountStorageKey)) || 0;
    // 只有当是最后一个标签页时，才清除令牌
    if (currentCount <= 1) {
      localStorage.removeItem(this.tokenStorageKey);
    }
  }

  ngOnDestroy(): void {
    // 移除事件监听，避免内存泄漏
    document.removeEventListener('visibilitychange', this.handleVisibilityChange.bind(this));
    window.removeEventListener('beforeunload', this.handleBeforeUnload.bind(this));
    // 清除未执行的定时器
    if (this.cleanupTimer) {
      clearTimeout(this.cleanupTimer);
    }
  }
}

大概率是踩了这些坑：

• 用了不可靠的unload事件：很多现代浏览器为了性能优化，在页面关闭时会跳过unload事件的执行，导致你的清除代码没机会运行。
• this指向错误：如果事件回调没有用bind(this)或者箭头函数绑定组件实例，回调里的this会指向window，根本无法正确操作LocalStorage。
• 没区分刷新和关闭：刷新也会触发beforeunload/unload事件，直接在这些事件里清除令牌，自然会导致刷新时令牌也丢失。

• 定时器的1秒延迟可以根据实际情况调整，只要确保刷新时页面能在定时器到期前重新变为可见即可。
• 如果浏览器意外崩溃，标签页计数可能会残留，但下次打开页面时initializeTabCount会自动修正计数。
• 这个方案完全支持新开标签页共享令牌，因为令牌和标签页计数都存在LocalStorage中。
• 单个标签页关闭时不会清除令牌，只有最后一个标签页关闭（也就是浏览器关闭）时才会执行清除操作。

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