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

【问题标题】：How to save the last state of sliders after page reload页面重新加载后如何保存滑块的最后状态
【发布时间】：2020-11-03 19:32:12
【问题描述】：

我使用 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");

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

任何帮助将不胜感激！

【问题讨论】：

标签： javascript angularjs d3.js

【解决方案1】：

我认为问题可能与您在本地存储中存储数据的方式有关。您将数据保存为字符串，但我认为 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()。

【讨论】：

【解决方案2】：

您的尝试几乎是正确的。您唯一需要更改的是 localStorage 的使用。只需像这样添加window 或$window（更“角度”的方式来访问窗口变量）变量：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

非常感谢。这很有帮助！我非常感谢.. :)