如果用户离开页面，如何维护页面状态？

Question

我有一个页面，该页面根据用户交互来更改dom。 但是，用户可能单击链接，该链接将导航到外部站点。 如果用户单击“后退”按钮，则会再次显示我的页面，但是dom更改不会持续。

跟踪用户交互以使他们返回时可以重建页面的最佳方法是什么？

为了维护状态并重建页面，我需要跟踪7-10个变量。

我有一些想法：

• 服务器端会话 -每次变量更改值时都需要回调服务器吗？
• 客户端cookie-如果用户禁用cookie，该怎么办？
• 隐藏的表单字段 -大多数（全部？）浏览器在本地缓存表单数据，因此单击后退按钮应该保留吗？

Answer 1

在大多数情况下，我会说最好的方法是在URL中表示页面状态。

原因如下：

• 因为URL是一个简单的概念，所以无论使用什么浏览器或什么隐私设置（例如，允许cookie和本地存储），此方法都有效。
• 如果用户A将URL发送给希望以相同状态查看页面的用户B，则该方法仍然有效。 您考虑的任何方法都不是这种情况。

如果您要跟踪的变量与特定用户（或会话）相关，那么在某种会话中跟踪这些变量将更为明智。 这可以是服务器端的，也可以是客户端的。

本地或会话存储（ HTML5本地存储与会话存储 ）是可能的解决方案，但有一些限制。

1. 不适用于所有浏览器或浏览器设置（较旧的浏览器不支持HTML5本地存储，例如，我知道以私有模式运行Safari不允许本地存储）
2. 如果您将链接发送给另一个用户，则他将不会看到处于相同状态的页面，因为他之前从未访问过该页面，并且他的本地或会话存储中未填充正确的值。

Answer 2

尝试Session变量：

sessionStorage.setItem('key', { "data": "mad data here" });

然后回想一下：

var data = sessionStorage.getItem('key');

您可以在加载页面时使用jQuery：

document.load(function() { 
    var data = sessionStorage.getItem('key');
    if (data) {
        data.doStuff();
    }
}