在Javascript / AngularJS中检测/阻止浏览器关闭或会话存储卸载

时间:2016-12-14 23:41:34

标签: javascript angularjs local-storage session-storage browser-close

如何使用javascript或AngularJS检测浏览器或标签关闭,并允许用户通过对话框消息阻止它?

我有一个AngularJS应用程序可以将数据保存到会话存储中,以便用户可以刷新页面而不会丢失其状态,并且还可以在不同的选项卡中打开多个单独的应用程序实例,而无需同步数据。

如果用户关闭了标签页或浏览器,那么他们将丢失正在进行的工作,因为会话已卸载。我想检测会话何时被销毁并向用户显示一条消息,通知他们如果他们继续,他们将丢失正在进行的工作,并允许他们选择确定继续关闭浏览器/选项卡或取消以阻止它收盘。我只想在浏览器/选项卡上显示消息,而不是当用户点击刷新按钮或导航到新页面时。

注1 :我需要使用会话存储而不是本地存储,因为不同的选项卡需要是应用程序的隔离实例,不能共享数据。

注意2 :我已经尝试了unload和beforeUnload事件但这些不起作用,因为它们也会在单击刷新按钮或用户导航离开页面时触发。我只想在会话被销毁之前显示消息,即当标签/浏览器实际关闭时。

注3 :这是一个供公司内部使用的企业应用程序,我知道所有用户及其用例,所以我不担心用弹出消息来烦扰他们。我意识到阻止用户关闭应用程序会在公共网站上造成糟糕的用户体验,但他是一个非常受控制的场景。

1 个答案:

答案 0 :(得分:0)

理想情况下,您可以使用beforeunload事件生命周期..但正如您所提到的,您不能。据我所知,没有其他方法可以将方法绑定到类似事件。

那就是说,你可能也想重新考虑你的第一个音符。您可以为每个新会话创建一个哈希值,并将该键下的会话内容存储在localstorage中。