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

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

Answer 2

我想我理解这个问题。如果您试图在用户离开页面之前显示一条消息，您可以使用在名为 onbeforeunload 的窗口对象中找到的事件。您可以在 MDN 上找到该文档（链接如下）。我希望这会有所帮助。https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload这可以用来制作那些“你确定要离开”的消息。因此浏览器不会意外拒绝您可以使用 Toast 或 Lightbox 的警报。-祝你好运！

Answer 3

从这个答案beforeunload 的工作方式，您无法区分天气是页面刷新还是浏览器关闭。beforeunload 这是一个非常令人困惑的事件，请避免使用它。因此，对于您正在处理会话的情况，您应该使用会话存储。sessionStorage 对象仅存储一个会话的数据（关闭浏览器选项卡时数据将被删除）。所以我猜你可以以某种方式操纵会话存储。希望这可以帮助。