javascript - 返回时恢复页面内容

Question

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

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

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

Answer 1

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

• 当用户更改图表状态时，页面网址会更新为呈现图表所需的所有参数(通过 History.pushState 调用)。
• 在页面加载时，您可以从网址获取初始状态(图表参数)并相应地渲染图表。

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