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

Question

仅在关闭选项卡/浏览器时才可能获得警报/确认吗？每当我刷新页面/获取警报时，都会出现此确认，我不希望它那样做。我创建了一个布尔型State变量-如果为true，则弹出确认对话框，为false，则不应该：

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

来自此answer

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项。您甚至可以按时间格式进行操作，以使其过期。您还可以在呈现的每个页面上验证令牌，只是确保用户拥有令牌。因此，如果用户拥有与您创建的令牌相同的令牌，则可以从那里操作状态。希望这会有所帮助！