javascript - 如果用户导航离开页面，如何维护页面状态？

Question

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

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

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

我的一些想法:

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

Answer 1

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

原因如下:

• 由于网址是一个非常简单的概念，因此无论使用何种浏览器或何种隐私设置(例如允许 Cookie 和本地存储)，此方法都有效。
• 如果用户 A 将 URL 发送给希望查看相同状态页面的用户 B，这仍然有效。您考虑的任何方法都不会出现这种情况。

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

本地或 session 存储 ( HTML5 Local storage vs. Session storage ) 是可能的解决方案，但有一些限制。

1. 并非在所有浏览器或浏览器设置中都适用(旧版浏览器不支持 HTML5 本地存储，我知道例如在私有(private)模式下运行 Safari 不允许本地存储)
2. 如果您将链接发送给其他用户，他将不会看到处于相同状态的页面，因为他之前没有访问过该页面，并且他的本地或 session 存储尚未填充正确的值。