如果用户导航离开页面，如何保持页面状态？

Question

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

跟踪用户交互的最佳方式是什么，以便我可以在他们的回报中重建页面？

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

一些想法我有：

• 服务器端会话 - 每当一个变量的变化值，就需要一个回调到服务器？
• 客户端cookie - 如果用户禁用cookie，该怎么办？
• 隐藏表单域 - 大多数（所有？）浏览器本地缓存表单数据，所以点击后退按钮应该保留？

Answer 1

尝试Session变量：

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

然后将其调出：

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

Answer 2

在大多数：

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

你可以在加载页面使用jQuery这样我想说的最好的方法就是代表p网址中的年龄状态。

这里的原因：

• 因为URL是这样一个简单的概念，这种方法的工作原理是什么浏览器或者什么隐私设置而不管（例如允许Cookie和本地存储）的使用。
• 如果用户A将URL发送给用户B，他们希望看到页面处于相同的状态，这仍然有效。这不适用于您所考虑的任何方法。

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

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

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