@dmitriu256

Как записать данные в localstorage и вывести данные из него одновременно без повторной перезагрузки страницы?

Описание проблемы:
Создал калькулятор расчета стоимости доставки на основе API NovaPoshta
Калькулятор успешно делает расчеты - с ним проблем нет.
Справочник городов компании загружаю в LocalStorage.
Справочник городов обновляю раз в сутки при помощи cookies cities.

Проблема:
При первой загрузке страницы (когда cookies и localstroage) еще пусты отрабатывает функция
if(getCookie('cities') === undefined){
        getCities();
    }


Результат записывается в localstorage, однако список Пункт выдачи - остается пустым
60803cda159f9206177450.png

После перезагрузки страницы формируется выпадающий список городов компании.
60803ce2e74d5570945113.png
Понимаю, что ситуация связанная с тем, что функция в момент вызова checkKey('cities', cityTo); отработала, но тк условие
if(localStorage.getItem(keyName) !== null){else ??? }

не выполнилось - нет еще такого ключа в хранилище - естественно ничего не произошло, напрашивается условие else {localStorage.getItem(keyName) == null => ....}

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

Основная часть программы по получению данных и взаимодействия с localStorage
//Получение городов компании
    const getCities = () => {
        let date = new Date();
        date = new Date(date.setDate(date.getDate() + 1));

        //Ответ для сервера
        const cityObj = {
            "modelName": "Address",
            "calledMethod": "getCities",
            "methodProperties": {},
            "apiKey": apiKey
        };

        loadCity(apiUrl, cityObj)
            .then(data => {
                //Формируем справочник городов компании
                const cities = data.data.map(item => {
                    const city = {
                        Description: item.Description,
                        Ref: item.Ref
                    };
                    return city;
                });

                //Готовый справочник городов компании
                localStorage.setItem('cities', JSON.stringify(cities));
                document.cookie = `${decodeURI('cities')} = ${decodeURI(true)}; expires = ${date}; path = /`;

            })
            .catch(error => {
                console.log(error);
            })
    }

  //Проверка наличия городов в справочнике
    if(getCookie('cities') === undefined){
        getCities();
    }

 //Проверка данных в localstorage
    const checkKey = (keyName, elem) => {
        if(localStorage.getItem(keyName) !== null){

            const data = JSON.parse(localStorage.getItem(keyName));
            //console.log(data);

            //Формруем список данных
            data.forEach(item => {
               const option = createOption(item);
                elem.append(option);
            });

            //Формируем данные в декоративном селекте
            if(elem.previousElementSibling.hasAttribute(['data-select'])){
                const select = elem.previousElementSibling.querySelector('.form-select__dropdown');
                select.style.overflowY = 'scroll';

                for(let i = 0; i < data.length; i++){
                    const selectItem = createSelectItem(data[i]);
                    select.append(selectItem);
                }
            }
    }

    checkKey('cities', cityTo);
  • Вопрос задан
  • 48 просмотров
Решения вопроса 1
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
Вы забыли про асинхронность. К тому моменту, как приходят данные с сервера и выполняется .then, строка checkKey('cities', cityTo); уже давно отработала и ничего не нашла.
Самое простое - добавить ещё один вызов checkKey в блоке .then после setItem.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Aleksandr-JS-Developer
@Aleksandr-JS-Developer
Бери и делай
Так много настрочили символов..

Алгоритм простой:
сайт загрузился
проверяет, есть ли записи в сторе
есть, выводим
нет, то, собственно, не выводим, а запрашиваем с сервера


вот так может выглядеть прототип этого веселья
let cities;

if( hasInCocies( 'cities' ) ){
	if( hasInLocalSt( 'cities' ) ){
  	cities = JSON.parse( localStorage.getItem( 'cities' ) );
  } else {
  	cities = document.cookie//.достать нужные значения
  }
} else {
	cities = getFromServerOrAPI( 'cities' );
  // Тут можно эти данные распихать и в localStorage и в cookie
  let citiesInJSON = JSON.stringify( cities );
  document.cookie = `cities=${citiesInJSON }`;
  localStorage.setItem( 'cities', citiesInJSON );
}

console.log( cities )
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы