React.JS 仅在关闭选项卡/浏览器时确认，而不是在刷新时确认

Question

是否只有在关闭选项卡/浏览器时才能收到警报/确认？ 每次我刷新页面/收到警报时都会出现此确认，我不希望它这样做。 我创建了一个布尔状态变量 - 如果它是真的 - 确认应该弹出，假 - 不应该：

render(){
        window.addEventListener("beforeunload", (ev) => 
        {  
          if(this.state.hasChanged===true)
           {
                ev.preventDefault();
                return ev.returnValue = 'Are you sure you want to close?';
           }
}

我也试过：

render(){
        window.addEventListener("beforeunload", (ev) => 
        {  
            console.log(performance)
            if((performance.navigation.type!==1)&&(this.state.hasChanged===true))
            {
                ev.preventDefault();
                return ev.returnValue = 'Are you sure you want to close?';
        }
        });
}

谢谢！

Answer 1

从这个答案

beforeunload 的工作方式，您无法区分天气是页面刷新还是浏览器关闭。 beforeunload 这是一个非常令人困惑的事件，避免使用它。

因此，对于处理会话的情况，您应该使用会话存储。 sessionStorage 对象仅存储一个会话的数据（关闭浏览器选项卡时数据将被删除）。

所以我猜你可以以某种方式操纵会话存储。 希望这可以帮助。

Answer 2

我想我明白这个问题了。 如果您试图在用户离开页面之前显示一条消息，您可以使用在名为 onbeforeunload 的窗口对象中找到的事件。 您可以在 MDN 上找到该文档（链接如下）。 我希望这有帮助。

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

这可以用来制作那些“你确定要离开吗”的消息。

因此浏览器不会意外拒绝警报，您可以改用 Toast 或 Lightbox。

-祝你好运！

Answer 3

@Davo 就像他说的那样，操纵 localStorage 可能是最好的选择。 因此，如果用户访问您的页面，请添加您想要的任何 localStorage 项目。 您甚至可以以时间格式执行此操作，以便您可以让它过期。 您还可以在呈现的每个页面上验证令牌，以确保用户拥有令牌。 因此，如果用户拥有与您创建的相同的令牌，那么您可以从那里操纵您的状态。 希望这可以帮助！