Javascript 返回时恢复页面内容

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

当用户离开此页面并通过此演示页面中的链接进入另一个html页面时，该页面的内容不会被保存，当用户返回时，他必须再次修改图表。我的问题：是否有任何方法可以缓存此演示页面，以便只要用户不关闭浏览器页面，它就可以恢复

---

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

我可以想出许多类似的方法

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

如果要将此操作持续更长时间，请将设置发送到服务器以存储在数据库中。服务器可以返回一个唯一的ID，该ID随后存储在cookie中，或者简单地使用会话cookie将图表设置与会话关联起来

---

另一种不使用cookies的方法是在导航时将图表设置添加到“后退”url。当用户单击返回时，url包含恢复图表状态所需的信息。但是，如果他们单击“浏览器后退”按钮，这将不起作用。

我可以想出很多方法来做类似的事情

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

如果要将此操作持续更长时间，请将设置发送到服务器以存储在数据库中。服务器可以返回一个唯一的ID，该ID随后存储在cookie中，或者简单地使用会话cookie将图表设置与会话关联起来

---

另一种不使用cookies的方法是在导航时将图表设置添加到“后退”url。当用户单击返回时，url包含恢复图表状态所需的信息。但是，如果他们单击“浏览器后退”按钮，这将不起作用。

您也可以尝试使用

sessionStorage

或

localStorage

（）本地存储页面状态。您也可以尝试使用

sessionStorage

或

localStorage

（）

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

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

您可以在此处使用历史API

• 当用户更改图表的状态时，页面URL将更新为显示图表所需的所有参数（通过history.pushState调用）
• 在页面加载时，从url获取初始状态（图表参数），并相应地呈现图表

---

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

您可以在此处使用历史API

• 当用户更改图表的状态时，页面URL将更新为显示图表所需的所有参数（通过history.pushState调用）
• 在页面加载时，从url获取初始状态（图表参数），并相应地呈现图表

---

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

谢谢。饼干的想法很好。但是，如果用户打开两个不同的选项卡，并且每个选项卡都有一个单独的图表，那么这将不起作用。我有点想要一张账单…谢谢。饼干的想法很好。但是，如果用户打开两个不同的选项卡，并且每个选项卡都有一个单独的图表，那么这将不起作用。我想要一个有标签的cookies…你能给我们一个描述这个API的链接吗。使用此技术的示例站点：。用户指定的搜索字符串将反映在URL中，然后该URL始终可以直接访问该字符串。很酷，但IE中不支持：（在IE10+中本机支持。在IE9中使用回退到标签导航。您可以使用此库（或类似的库）为此-请给我们一个描述此API的链接好吗？一个使用此技术的示例网站：。用户指定的搜索字符串会反映在URL中，然后它总是可以通过此URL直接访问。很酷，尽管IE中不支持：（在IE10+中本机支持。在IE9中使用回退到标签导航。您可以使用此库（或类似库）来实现此目的。）-