页面重新加载后如何保存滑块的最后一个 state

Question

我使用 d3 和 angular 可视化了这个网络。 这是可视化的链接。 我想保存网络的最后一个 state，这样即使我刷新页面，它也会显示最后一个 state。 但不知道该怎么做。

我读到它可以使用sessionStorage或localStorage来完成，但我似乎无法为我的可视化弄清楚它。

我通过将我的 JSON 数据设置到 sessionStorage 然后获取它来尝试这个：

 if (sessionStorage) {
        sessionStorage.setItem("myKey", myJSON.toString());
    }

 if (sessionStorage) {
        sessionStorage.getItem("myKey"); // {"myKey": "some value"}
    }

我也这样尝试过：

localStorage.setItem("networkGraph", networkGraph);
var networkGraph = localStorage.getItem("networkGraph");

但它不起作用。 这是正确的方法吗？

任何帮助将不胜感激！

Answer 1

您确定需要sessionStorage而不是localStorage吗？ 在sessionStorage的情况下，当您的应用程序的浏览器选项卡关闭时，保存的数据将被删除。

你可以写localStorage.setItem('inputLayerHeight', vm.inputLayerHeight); 在你的onChange处理程序中记住inputLayerHeight和Number.parseInt(localStorage.getItem('inputLayerHeight')) || 15 Number.parseInt(localStorage.getItem('inputLayerHeight')) || 15恢复inputLayerHeight的value属性的vm.inputLayerHeightSlider 。 相同的方法可用于保留其他值。

Answer 2

你的尝试几乎是正确的。 您唯一需要更改的是 localStorage 的使用。 只需添加window或$window （访问 window 变量的更多“角度”方式）变量，如下所示：

$window.localStorage.setItem("networkGraph", JSON.stringify(networkGraph));

此外，如果您正在寻找一种使用本地存储的简单方法，我建议使用angular- storage。 它让事情变得不那么痛苦:)

Answer 3

我认为问题可能与您在本地存储中存储数据的方式有关。 您将数据保存为字符串，但我认为 d3 无法将字符串识别为有效数据选项。 因此，您应该这样做：

if (sessionStorage) {
    // Parse the data to a JavaScript Object
    const data = JSON.parse(sessionStorage.getItem("myKey"));
} else {
// Fetch data...
// Set sessionStorage or localStorage
   sessionStorage.setItem("myKey", myJSON.toString());
}

您可以重新排列可能适合您的逻辑，但想法是最终在从存储中获取数据时应该使用JSON.parse() 。