刷新时标签页布局丢失状态

Question

我们设计了带有标签页布局的应用程序。

Tabbed Page Style

选项卡是页面，是在菜单点击时创建的，这些是作为子DOM元素添加到父容器中的，它是一个具有输入元素的新表单，我们一次可以有多个选项卡页面。我的应用程序是在Spring MVC，PostgresSQL，Jquery。

刷新后会发生什么，丢失所有添加的动态新标签（标签页是我们丢失了当前状态）。

如果需要，我可以分享参考代码。

请建议我如何管理申请状态。

Answer 1

窗口重载/刷新是一个纯粹的浏览器事件，它结束了页面的执行，之后就不能真正具有脚本连续性。

一个选项是向window.onbeforeunload附加警报，通知用户如果重新加载内容将会丢失 - 这将关闭窗口并刷新它。

但是，如果您需要能够在保留选项卡的同时重新加载（例如，在选项卡中加载新数据），则可以使用window.onbeforeunload提示用户是否要保存数据/布局在关闭之前，如果是，则执行对服务器的AJAX调用，在那里保存选项卡（将其与会话相关联）。这意味着在加载页面时，您需要首先检查是否存在与会话关联的选项卡数据，并从那里加载。

其他选项 - 这是我的首选 - 是使用window.localStorage将数据保存在用户磁盘上，并在页面加载时检查localStorage中是否有数据。它目前拥有相当广泛的浏览器支持，并且有很好的库使得使用它变得轻而易举。我使用store.js并且可以保证其易用性和可靠性。