Почему удаление из localStorage работает корректно только после перезагрузки страницы?

Question

[Andy Koshman]

Всем привет, столкнулся с проблемой удаления объектов из localStorage, по факту я получаю с помощью fetch цифру, которая подразумевает стоимость в виде коллбэка result и провожу стандартные манипуляции внутри fetch, в виде формирования объекта с полученной стоимостью, push объекта в массив, суммирование данных из объекта и т.д. В случае данного кода всё вроде как работает нормально, но только если после добавления объектов перезагрузить страницу вида [{price: 100},{price: 200}] кликаем на Х какого то "отрисованного" объекта и получаем в результате [{price: 200}] всё как обычно. Если же повторить данный алгоритм событий но не перезагружать страницу после добавления, то после получаем [] в не зависимости от того какой объект мы удаляем. Я набросал приблизительно то что происходит в проекте касательно данной задачи, скажите пожалуйста в чем может быть причина, может где то с последовательностью напутал.

let price = JSON.parse(localStorage.getItem("price") || "[]"); 

button.addEventListener("click", function(e) { //кликаю
  fetch(url, opt)
    .then((response) => response.json())
    .then((result) => { //получаю сумму с backend
      let tariffVal = document.querySelector("#tariff-val"); //место рендера result

      let outputPrice = [];

      if (localStorage.getItem("price") != undefined) {
        outputPrice = JSON.parse(localStorage.getItem("price")); //присваииваю массиву результат хранилища 
      }

      let sumPriceObj = { //формирую объект для ЛС
        price: result.sum,
        id: parseInt(cart.id),
      };
      outputPrice.push(sumPriceObj); //пуш объектов в массив

      localStorage.setItem("price", JSON.stringify(outputPrice)); //записываю в ЛС

      //функция подсчета суммы
      function saveSumPriceToRender(outputPrice) {
        let sum = outputPrice.reduce((acc, curr) => acc + curr.price, 0);

        localStorage.setItem("sumPrice", sum);
        let sumPrice = parseInt(localStorage.getItem("sumPrice")) || 0;
        tariffVal.innerHTML = sumPrice;
      }
      saveSumPriceToRender(outputPrice);
    })
})

//за пределами клика рендерю данные из ЛС в разметку
function getSumPriceToRender() {
  let tariffVal = document.querySelector("#tariff-val");
  let sumPrice = parseInt(localStorage.getItem("sumPrice")) || 0;
  tariffVal.innerHTML = sumPrice;
}
getSumPriceToRender();

//удаление объектов из лс и пересчет суммы
function removeItem(e) {
  if (e.target.classList.contains("close")) {
    let sumAfterRemove = price.reduce((acc, curr) => acc + curr.price, 0); //пересчет суммы
    localStorage.setItem("price", JSON.stringify(price)); //перезапись объектов 
//клик на отрисованный объект до перезагрузки страницы, например 
//было 2 объекта остался пустой массив, а после перезагрузки страницы удаляет правильно 
//(было 2 объекта и при клике на Х остаётся 1 объект в массиве )
    localStorage.setItem("sumPrice", JSON.stringify(sumAfterRemove)); //перезаписываю сумму
    getSumPriceToRender(); //рендерю в разметку текущий результат суммы
  }
}

Answer 1

[Aleksandr Kritskii]

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

function removeItem(e) {
  if (e.target.classList.contains("close")) {
    let price = JSON.parse(localStorage.getItem("price") || "[]"); 
    let sumAfterRemove = price.reduce((acc, curr) => acc + curr.price, 0); //пересчет суммы
    localStorage.setItem("price", JSON.stringify(price)); //перезапись объектов 
//клик на отрисованный объект до перезагрузки страницы, например 
//было 2 объекта остался пустой массив, а после перезагрузки страницы удаляет правильно 
//(было 2 объекта и при клике на Х остаётся 1 объект в массиве )
    localStorage.setItem("sumPrice", JSON.stringify(sumAfterRemove)); //перезаписываю сумму
    getSumPriceToRender(); //рендерю в разметку текущий результат суммы
  }
}

Comments

[Andy Koshman]

Вы имеете ввиду что нужно считывать price в функции remove и убрать из глобальной области видимости? Я попробовал таким образом и у меня почему то объекты вообще не удаляются.

[Aleksandr Kritskii]

Andy Koshman, да, именно так

У Вас происходит изначально чтение из localStorage, но в момент добавления в localStorage не обновляются текущие данные в localStorage
Соответственно есть два пути:
1. Перед удалением считываем еще раз
2. После добавления актуализируем информацию в let price

[Andy Koshman]

Aleksandr Kritskii, Спасибо получилось, нашел нужное место для одного из путей в своей функции)