Angular项目：如何在电脑重启或关机时清除浏览器Local Storage

浏览器的beforeunload事件在系统强制重启、关机时无法触发——因为进程会被直接终止，没有时间执行事件逻辑，所以依赖该事件的清理规则会失效。由于你需要支持多标签页数据共享，Session Storage无法满足需求，因此需要改用主动验证+过期清理的方案。

核心方案：给Local Storage数据添加会话过期验证 #

通过在应用启动时主动检查会话有效性，判断是否需要清空旧数据。核心逻辑：

• 存储数据时同步记录会话起始时间
• 每次应用初始化时，检查当前时间与会话起始时间的间隔
• 如果间隔超过设定阈值（如30分钟，可按需调整），则判定之前的会话因强制关机/重启中断，清空Local Storage并创建新会话

Angular实现步骤 #

1. 创建封装Local Storage的服务 #

该服务负责数据存储、会话验证和清理逻辑：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class SessionLocalStorageService {
  private readonly SESSION_START_KEY = 'app_session_start';
  // 过期阈值：30分钟，可根据实际需求调整
  private readonly EXPIRY_THRESHOLD = 30 * 60 * 1000;

  constructor() {
    // 应用初始化时自动执行会话验证
    this.validateSession();
  }

  private validateSession(): void {
    const sessionStartTimestamp = localStorage.getItem(this.SESSION_START_KEY);
    const currentTime = Date.now();

    // 无会话记录或会话已过期，清空旧数据并创建新会话
    if (!sessionStartTimestamp || currentTime - parseInt(sessionStartTimestamp) > this.EXPIRY_THRESHOLD) {
      this.clearNonSessionStorage();
      localStorage.setItem(this.SESSION_START_KEY, currentTime.toString());
    }
  }

  // 存储数据（自动序列化为JSON）
  setItem(key: string, value: any): void {
    localStorage.setItem(key, JSON.stringify(value));
  }

  // 获取数据（自动反序列化）
  getItem(key: string): any {
    const storedValue = localStorage.getItem(key);
    return storedValue ? JSON.parse(storedValue) : null;
  }

  // 删除指定数据
  removeItem(key: string): void {
    localStorage.removeItem(key);
  }

  // 清空业务数据，保留会话标识
  private clearNonSessionStorage(): void {
    Object.keys(localStorage).forEach(key => {
      if (key !== this.SESSION_START_KEY) {
        localStorage.removeItem(key);
      }
    });
  }

  // 主动清空所有数据（包括会话标识）
  clearAll(): void {
    localStorage.clear();
  }
}

2. 结合标签页计数完善正常关闭逻辑 #

保留你原有的beforeunload逻辑，处理正常关闭最后一个标签页的场景，避免等待过期时间：
在根组件（如AppComponent）中添加标签页计数和卸载监听：

import { Component, HostListener } from '@angular/core';
import { SessionLocalStorageService } from './session-local-storage.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private readonly TAB_COUNT_KEY = 'active_tab_count';

  constructor(private storageService: SessionLocalStorageService) {
    // 打开新标签页时，递增计数
    const currentCount = parseInt(localStorage.getItem(this.TAB_COUNT_KEY) || '0');
    localStorage.setItem(this.TAB_COUNT_KEY, (currentCount + 1).toString());
  }

  @HostListener('window:beforeunload')
  onBeforeUnload(): void {
    // 关闭标签页时，递减计数
    const currentCount = parseInt(localStorage.getItem(this.TAB_COUNT_KEY) || '0');
    const newCount = currentCount - 1;
    localStorage.setItem(this.TAB_COUNT_KEY, newCount.toString());

    // 最后一个标签页关闭时，主动清空所有数据
    if (newCount <= 0) {
      this.storageService.clearAll();
      localStorage.removeItem(this.TAB_COUNT_KEY);
    }
  }
}

方案说明 #

• 正常关闭场景：最后一个标签页关闭时，beforeunload事件触发，立即清空Local Storage，无需等待过期。
• 强制关机/重启场景：下次打开应用时，服务会自动检查会话时间，发现已过期则清空旧数据，确保数据不会残留。
• 多标签页支持：所有标签页共享Local Storage中的会话标识和计数，不会互相干扰。

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