Hey there! I get that you've tried a few solutions but ran into the frustrating issue of localStorage getting cleared on page refresh instead of only when closing the browser or tab. Let's break down the correct implementations for vanilla JavaScript, Angular, and React—including handling multi-tab scenarios where you only want to clear localStorage when the last tab is closed.

Key Background: Why Previous Solutions Failed #

The beforeunload and unload events fire on both refresh and close, which is why your earlier attempts cleared localStorage accidentally. We need ways to distinguish between these two actions, and for multi-tab setups, track active tabs to know when the last one is closed.

1. Vanilla JavaScript Implementation #

A. Single Tab: Clear on Close (Not Refresh) #

Use a timer trick to avoid refresh triggers—here's how it works: on close, the timer runs; on refresh, the load event cancels the timer before it executes:

let clearStorageTimer;

// Schedule localStorage clear on close
window.addEventListener('beforeunload', () => {
  clearStorageTimer = setTimeout(() => {
    localStorage.clear();
    // Uncomment below to clear sessionStorage too:
    // sessionStorage.clear();
  }, 100);
});

// Cancel timer if page reloads (load event fires on refresh)
window.addEventListener('load', () => {
  clearTimeout(clearStorageTimer);
});

Alternatively, use the pagehide event with event.persisted (checks if the page is cached for back/forward navigation):

window.addEventListener('pagehide', (event) => {
  // Only clear if the page isn't being saved to the browser cache
  if (!event.persisted) {
    localStorage.clear();
  }
});

B. Multi-Tab: Clear Only When Last Tab is Closed #

We’ll use sessionStorage (per-tab storage) and localStorage to track active tabs across all windows:

// Generate a unique ID for this tab
const tabId = `tab-${Date.now()}-${Math.random()}`;
sessionStorage.setItem('tabId', tabId);

// Initialize or update active tabs list in localStorage
let activeTabs = JSON.parse(localStorage.getItem('activeTabs')) || [];
if (!activeTabs.includes(tabId)) {
  activeTabs.push(tabId);
  localStorage.setItem('activeTabs', JSON.stringify(activeTabs));
}

// Sync active tabs count when other tabs update it
window.addEventListener('storage', (e) => {
  if (e.key === 'activeTabs') {
    activeTabs = JSON.parse(e.newValue) || [];
  }
});

let clearStorageTimer;

window.addEventListener('beforeunload', () => {
  // Remove current tab from active list
  activeTabs = activeTabs.filter(id => id !== tabId);
  localStorage.setItem('activeTabs', JSON.stringify(activeTabs));

  // Schedule clear only if this is the last tab
  clearStorageTimer = setTimeout(() => {
    if (activeTabs.length === 0) {
      localStorage.clear();
    }
  }, 100);
});

// Cancel timer on refresh
window.addEventListener('load', () => {
  clearTimeout(clearStorageTimer);
});

2. Angular Implementation #

A. Single Tab Solution #

Add this logic to your root AppComponent to handle close vs refresh:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  private clearStorageTimer: any;

  ngOnInit(): void {
    // Cancel timer on page load (refresh)
    window.addEventListener('load', () => {
      clearTimeout(this.clearStorageTimer);
    });
  }

  @HostListener('window:beforeunload')
  onBeforeUnload(): void {
    // Schedule localStorage clear for tab close
    this.clearStorageTimer = setTimeout(() => {
      localStorage.clear();
      // sessionStorage.clear(); // Uncomment if needed
    }, 100);
  }
}

B. Multi-Tab Solution #

Extend the single-tab code with tab tracking:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  private clearStorageTimer: any;
  private tabId: string;
  private activeTabs: string[] = [];

  ngOnInit(): void {
    // Register current tab with unique ID
    this.tabId = `tab-${Date.now()}-${Math.random()}`;
    sessionStorage.setItem('tabId', this.tabId);

    // Initialize active tabs list
    this.activeTabs = JSON.parse(localStorage.getItem('activeTabs')) || [];
    if (!this.activeTabs.includes(this.tabId)) {
      this.activeTabs.push(this.tabId);
      localStorage.setItem('activeTabs', JSON.stringify(this.activeTabs));
    }

    // Sync active tabs from other tabs
    window.addEventListener('storage', (e) => {
      if (e.key === 'activeTabs') {
        this.activeTabs = JSON.parse(e.newValue) || [];
      }
    });

    // Cancel timer on refresh
    window.addEventListener('load', () => {
      clearTimeout(this.clearStorageTimer);
    });
  }

  @HostListener('window:beforeunload')
  onBeforeUnload(): void {
    // Update active tabs list
    this.activeTabs = this.activeTabs.filter(id => id !== this.tabId);
    localStorage.setItem('activeTabs', JSON.stringify(this.activeTabs));

    // Clear localStorage only if this is the last tab
    this.clearStorageTimer = setTimeout(() => {
      if (this.activeTabs.length === 0) {
        localStorage.clear();
      }
    }, 100);
  }
}

3. React Implementation #

A. Single Tab Solution #

Use the useEffect hook to manage event listeners and the timer trick:

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    let clearStorageTimer;

    const handleBeforeUnload = () => {
      clearStorageTimer = setTimeout(() => {
        localStorage.clear();
        // sessionStorage.clear(); // Uncomment if needed
      }, 100);
    };

    const handleLoad = () => {
      clearTimeout(clearStorageTimer);
    };

    // Attach event listeners
    window.addEventListener('beforeunload', handleBeforeUnload);
    window.addEventListener('load', handleLoad);

    // Cleanup listeners on unmount
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
      window.removeEventListener('load', handleLoad);
      clearTimeout(clearStorageTimer);
    };
  }, []);

  return <div>Your App Content</div>;
}

export default App;

B. Multi-Tab Solution #

Add tab tracking logic inside the useEffect hook:

import { useEffect, useState } from 'react';

function App() {
  const [activeTabs, setActiveTabs] = useState([]);
  const tabId = `tab-${Date.now()}-${Math.random()}`;

  useEffect(() => {
    let clearStorageTimer;

    // Register current tab
    sessionStorage.setItem('tabId', tabId);
    let initialTabs = JSON.parse(localStorage.getItem('activeTabs')) || [];
    if (!initialTabs.includes(tabId)) {
      initialTabs.push(tabId);
      localStorage.setItem('activeTabs', JSON.stringify(initialTabs));
      setActiveTabs(initialTabs);
    } else {
      setActiveTabs(initialTabs);
    }

    // Sync active tabs from other tabs
    const handleStorage = (e) => {
      if (e.key === 'activeTabs') {
        setActiveTabs(JSON.parse(e.newValue) || []);
      }
    };

    const handleBeforeUnload = () => {
      const updatedTabs = activeTabs.filter(id => id !== tabId);
      localStorage.setItem('activeTabs', JSON.stringify(updatedTabs));

      // Schedule clear for last tab
      clearStorageTimer = setTimeout(() => {
        if (updatedTabs.length === 0) {
          localStorage.clear();
        }
      }, 100);
    };

    const handleLoad = () => {
      clearTimeout(clearStorageTimer);
    };

    // Attach listeners
    window.addEventListener('storage', handleStorage);
    window.addEventListener('beforeunload', handleBeforeUnload);
    window.addEventListener('load', handleLoad);

    // Cleanup
    return () => {
      window.removeEventListener('storage', handleStorage);
      window.removeEventListener('beforeunload', handleBeforeUnload);
      window.removeEventListener('load', handleLoad);
      clearTimeout(clearStorageTimer);
    };
  }, [activeTabs, tabId]);

  return <div>Your App Content</div>;
}

export default App;

Important Notes #

• The 100ms timer delay is intentional: on refresh, the load event fires before the timer executes, canceling it. On close, the load event never fires, so the timer runs.
• For multi-tab setups, sessionStorage ensures each tab has a unique ID, while localStorage syncs the active tab count across all windows.
• Test thoroughly across browsers: behavior is consistent in modern Chrome, Firefox, Edge, and Safari.

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