如何在React.js中关闭浏览器时清除Local Storage？已尝试beforeunload事件

基础实现：绑定页面卸载事件 #

很多人用beforeunload没成功，大概率是事件绑定/清理的方式不对。在React函数组件中，你可以通过useEffect来绑定和卸载事件，确保事件只在组件挂载时绑定一次，卸载时清理。

示例代码：

import { useEffect } from 'react';

function YourComponent() {
  useEffect(() => {
    const clearLocalStorage = () => {
      // 清除全部LocalStorage
      localStorage.clear();
      // 若只需清除特定键，用：localStorage.removeItem('target-key')
    };

    // 绑定beforeunload和unload事件，兼容不同浏览器行为
    window.addEventListener('beforeunload', clearLocalStorage);
    window.addEventListener('unload', clearLocalStorage);

    // 组件卸载时移除事件监听，避免内存泄漏
    return () => {
      window.removeEventListener('beforeunload', clearLocalStorage);
      window.removeEventListener('unload', clearLocalStorage);
    };
  }, []);

  return <div>你的页面内容</div>;
}

export default YourComponent;

说明：

• beforeunload在浏览器关闭/刷新前触发，unload在页面完全卸载时触发，同时绑定两个能提升兼容性。
• 注意：开发环境的热重载会触发卸载事件，测试时建议用正常页面刷新或生产环境验证。

进阶：区分刷新与浏览器关闭（可选） #

如果需要在用户刷新页面时保留LocalStorage，仅关闭浏览器时清除，可以借助sessionStorage做标记（sessionStorage会在标签页关闭时自动清除）：

示例代码：

import { useEffect } from 'react';

function YourComponent() {
  useEffect(() => {
    // 页面加载时判断：若sessionStorage无标记，说明是新会话（浏览器刚打开），清除残留的LocalStorage
    const isSessionActive = sessionStorage.getItem('session-active');
    if (!isSessionActive) {
      localStorage.clear();
    }
    // 设置会话标记
    sessionStorage.setItem('session-active', 'true');

    const handleUnload = () => {
      // 移除标记，确保下次新会话能触发清除逻辑
      sessionStorage.removeItem('session-active');
    };

    window.addEventListener('beforeunload', handleUnload);
    return () => window.removeEventListener('beforeunload', handleUnload);
  }, []);

  return <div>你的页面内容</div>;
}

export default YourComponent;

局限性：该方法依赖标签页独立的sessionStorage，若用户打开多个同站点标签页，可能会出现逻辑冲突，需根据业务场景判断是否适用。

注意事项 #

• 部分浏览器的安全策略可能限制beforeunload中的同步操作，但localStorage.clear()是同步方法，通常能正常执行。
• 若浏览器意外崩溃（而非正常关闭），unload事件不会触发，此时无法清除LocalStorage，这种场景无法通过前端代码完全覆盖。

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