0

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

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

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

4

4 回答 4

2

您可以在此处使用 History API。

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

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

于 2013-08-03T11:40:36.267 回答
1

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

于 2013-08-02T08:45:04.947 回答
1

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

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

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

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

于 2013-08-02T08:23:35.883 回答
1

您也可以尝试使用sessionStorage或localStorage（DOM 存储指南）在本地存储页面状态

于 2013-08-02T08:29:44.547 回答