页面关闭/刷新触发不同函数咨询：关闭窗口需清除登录信息

Absolutely! You can pull off this behavior, though you’ll need to work within browser security limits—distinguishing between window close, refresh, and navigation isn’t 100% perfect, but we can get close enough for most real-world use cases, especially your core requirement of deleting login data only on window close.

Core Approach #

We’ll use a combination of browser events (beforeunload, unload) and state flags to track user intent:

• Track if the user is actively navigating away via a link (so we don’t treat this as a window close)
• Detect refresh actions using browser navigation APIs
• Use the unload event to run the right logic based on our flags

Step-by-Step Implementation #

Here’s a working code example with comments explaining each part:

// Initialize state flags to track user actions
let isNavigatingAway = false; // Mark if user clicked an internal link
let isRefreshing = false;     // Mark if user is refreshing the page

// 1. Track internal link clicks (to distinguish from window close)
document.addEventListener('click', (e) => {
  const targetLink = e.target.closest('a');
  // Only mark same-origin links as navigation (external links will trigger unload too)
  if (targetLink && targetLink.origin === window.location.origin) {
    isNavigatingAway = true;
  }
});

// 2. Detect refresh and run refresh-specific logic
window.addEventListener('beforeunload', () => {
  // Check if this is a refresh using modern Navigation API (fallback to legacy method)
  if (navigation.type === 'reload' || performance.navigation.type === 1) {
    isRefreshing = true;
    handleRefresh(); // Run your refresh function here
  }
});

// 3. Handle final unload action based on our flags
window.addEventListener('unload', () => {
  if (isRefreshing) {
    // Refresh scenario: do nothing (or run your refresh cleanup if needed)
    return;
  }

  if (isNavigatingAway) {
    // User navigated to another page: keep login state, run your navigation logic
    handleNavigationAway();
  } else {
    // Window/tab closed: delete all login data
    handleCloseWindow();
  }
});

// Define your custom functions here
function handleRefresh() {
  console.log('Page is refreshing—keeping login state');
  // Add your refresh-specific logic here
}

function handleNavigationAway() {
  console.log('User navigated to another page—keeping login state');
  // Add your navigation-specific logic here
}

function handleCloseWindow() {
  console.log('Window closed—deleting all login data');
  // Clear localStorage/sessionStorage
  localStorage.removeItem('authToken');
  sessionStorage.clear();
  // Clear cookies (set expiry to past date)
  document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
  document.cookie = "authSession=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}

Notes & Edge Cases #

• Browser Limits on unload: The unload event has strict time limits—avoid async operations like fetch here (they’ll likely fail). If you need to send data on close, use navigator.sendBeacon() instead (it’s designed for this scenario).
• Refresh Detection: The navigation.type API is modern and preferred; performance.navigation.type is a legacy fallback for older browsers.
• Edge Scenarios: Some browsers (especially in private mode) may block or limit these events. There’s no way to detect every edge case (e.g., force-closing the browser via task manager), but this covers most user-initiated actions.
• External Links: If the user clicks an external link, isNavigatingAway won’t be set (since the origin differs). This will trigger the handleCloseWindow logic—if you want to avoid this, adjust the click handler to check for external links and set isNavigatingAway accordingly.

SPA Considerations #

If you’re using a single-page app (React, Vue, etc.), client-side route changes won’t trigger beforeunload/unload. You’ll need to add route-specific tracking:

Vue Example

// In your router setup
router.beforeEach((to, from, next) => {
  isNavigatingAway = true;
  next();
});

React Example

import { useLocation } from 'react-router-dom';
import { useEffect } from 'react';

function App() {
  const location = useLocation();

  useEffect(() => {
    // Mark as navigation whenever the route changes
    isNavigatingAway = true;
  }, [location.pathname]);

  return (/* Your app components */);
}

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