访问时回收页面内容

Question

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

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

我最简单的想法是让每个客户端页面有一个唯一的ID。这样我就可以在用户离开时保存页面的状态，当他回来时我可以根据这个ID来覆盖它的内容。那么问题是如何为客户端页面实现此ID。

Answer 1

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

如果是我，我会将用户图表设置存储在cookie中，因此当他们回到页面时，您可以简单地读取设置的cookie并使用它们重新显示图表。

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

不使用cookie的替代方法是在您离开时将图表设置添加到“后退”网址。当用户点击返回时，url包含恢复图表状态所需的信息。但是，如果他们点击浏览器后退按钮，这不起作用。

Answer 2

您也可以尝试存储页面的状态在本地使用或者sessionStorage或localStorage（DOM Storage guide）

Answer 3

如果有两个或多个选项卡，我不认为有一种方法一旦被关闭，则区分。我会使用Steve关于在ID + cookie中存储ID的想法，当用户回到页面时，我会根据cookie和数据库查询向他们提供他们所有过去修改过的图表的列表。然后他们可以选择他们想重新打开的图表。

Answer 4

您可以在这里使用History API。

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

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