Question

我使用d3和angular可视化了这个网络。这是可视化的link。我想保存网络的最新状态，以便即使刷新页面也能显示最新状态。但是不知道该怎么做。

我了解到可以使用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来恢复{{1}的inputLayerHeight属性的value 1}}对象。其他值可以使用相同的方法。

Answer 2

您的尝试几乎是正确的。您唯一需要更改的是localStorage的用法。只需添加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()。

重新加载页面后如何保存滑块的最后状态

3 个答案: