回访时恢复页面内容

Question

我正在构建一个小型网站，其中一个页面上有一个d3.js / highchart可视化演示。可视化是交互式的，并且可以由用户修改。

当用户离开此页面并按照此演示页面中的链接进入另一个html页面时，页面内容不会被保存，当他回来时，他必须再次修改图表。我的问题：有没有办法缓存这个演示页面，这样只要用户不关闭浏览器页面，就可以恢复它？

我最简单的想法是让每个客户端页面都有一个唯一的ID。因此，当用户离开时，我将保存页面的状态，当他回来时，我可以根据此ID覆盖其内容。然后问题是如何为客户端页面实现此ID。

Answer 1

您可以在此处使用历史记录API。

• 当用户更改图表的状态时，页面URL将使用呈现图表所需的所有参数进行更新（通过history.pushState调用）。
• 在页面加载时，您将从网址获取初始状态（图表参数）并相应地渲染图表。

这种方法的一个好处是你甚至可以将这样的URL发送给另一个人，他们将看到相同的自定义图表。

Answer 2

我可以想到很多方法可以做这样的事情。

如果是我，我只会将用户图表设置存储在cookie中，因此当他们导航回页面时，您只需读取设置的cookie并使用它们重新显示图表。

如果您希望延长此时间，请将设置发送到服务器以存储在数据库中。服务器可以返回一个唯一的ID，然后存储在cookie中，或者简单地使用会话cookie将图表设置与会话相关联。

不使用Cookie的替代方法是在您离开时将图表设置添加到“后退”网址。当用户单击以返回时，该URL包含恢复图表状态所需的信息。但是，如果他们单击浏览器后退按钮，则无效。

Answer 3

您还可以尝试使用sessionStorage或localStorage（DOM Storage guide）

在本地存储页面状态

Answer 4

如果您有两个或更多标签，我认为一旦它们关闭就无法区分它们。我会使用Steve关于将ID存储在DB + cookie中的想法，当用户返回页面时，我会根据cookie和数据库查询向他们提供所有过去修改过的图表的列表。然后他们可以选择他们想要重新打开的图表。