Как сохранить последнее состояние ползунков после перезагрузки страницы

Question

Я визуализировал эту сеть с помощью d3 и angular. Вот ссылка на визуализацию. Я хотел сохранить последнее состояние сети, чтобы даже если я обновлю sh страницу, на ней будет отображаться последнее состояние. Но не знаю, как это сделать.

Я читал, что это можно сделать, используя 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, чтобы восстановить свойство inputLayerHeight at value объекта vm.inputLayerHeightSlider. Тот же подход можно использовать для сохранения других значений.

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());
}

Вы можете переставить logi c так, как это может вам подходит, но идея состоит в том, что в конце вы должны использовать JSON.parse() при получении данных из хранение.