如何实现关闭窗口时清除LocalStorage，刷新页面时不执行？

浏览器的onbeforeunload事件无法直接区分页面刷新和窗口关闭，两种操作都会触发该事件。要实现仅在窗口关闭时清除localStorage，可以利用pagehide事件结合event.persisted属性来判断：

• pagehide事件会在页面被隐藏（包括刷新、关闭、跳转）时触发
• event.persisted为true表示页面会被存入浏览器的bfcache（后退/前进缓存），对应页面刷新或后退/前进导航场景
• event.persisted为false表示页面不会被缓存，对应窗口关闭或跳转到新域名页面场景

替换你当前的代码为以下实现：

window.addEventListener('pagehide', function(event) {
  // 仅在窗口关闭时执行清除逻辑
  if (!event.persisted) {
    dispatch(logout());
    dispatch(userLoggedOut());
    deleteFromLocalStorage("authToken");
    deleteFromLocalStorage("user");
    deleteFromLocalStorage("websiteMenu");
    deleteFromLocalStorage("allowedUserAction");
    navigate("/login");
  }
});

补充说明 #

• 该方案兼容Chrome、Firefox、Safari、Edge等现代主流浏览器
• 若需兼容更旧的浏览器（如IE），可以结合beforeunload记录时间戳，再在unload事件中判断时间差（刷新时时间差极小，关闭窗口时时间差较大），但这种方法可靠性较低，仅作为降级方案使用：

  let beforeUnloadTime = 0;
  window.addEventListener('beforeunload', function() {
    beforeUnloadTime = Date.now();
  });
  
  window.addEventListener('unload', function() {
    const timeDiff = Date.now() - beforeUnloadTime;
    // 时间差大于500ms判定为窗口关闭（刷新时通常小于100ms）
    if (timeDiff > 500) {
      dispatch(logout());
      dispatch(userLoggedOut());
      deleteFromLocalStorage("authToken");
      deleteFromLocalStorage("user");
      deleteFromLocalStorage("websiteMenu");
      deleteFromLocalStorage("allowedUserAction");
      navigate("/login");
    }
  });
  

内容的提问来源于stack exchange，提问作者Faisal Ur Rehman