Как сохранить данные в разметке из localStorage? Почему срабатывает в песочнице, а в проекте нет?

Question

[Andy Koshman]

Всем добрый, имеется ajax запрос в с помощью которого при клике я получаю сумму карточки с бэка в виде параметра result в функции. С помощью цикла each я перебираю карточки и получаю общую сумму res += result. После я записываю общую сумму res в localStorage, получаю sumPrice с помощью getItem и записываю данные в разметку tariffVal.html(sumPrice).
Проблема в том, что в песочнице данный формат сохранения в storage работает https://jsfiddle.net/u3bdkg0m/6/
а в проекте почему то всё равно не сохраняет данные в разметке из storage и при перезагрузке я вижу всё тот же 0, а не 100 например. В чем тут может быть беда?

$.ajax({
   url: urlTariffCalculationPassenger,
   method: "GET",
   data: TariffCalculationPassObj,
   success: function(result) {
     let res = 0;
     let sidebarItem = $('.sidebar-item') //карточка товара
     let tariffVal = $('#tariff-val') //сюда выводится сумма
     let sumPrice = JSON.parse(localStorage.getItem("price") || "[]"); 
     tariffVal.html(sumPrice) //вывожу данные в разметку из storage 

     sidebarItem.each(item => { //перебираю карточки

       res += result; // получаю общую сумму 

       localStorage.setItem("price", JSON.stringify(res)); // записываю общую сумму в storage

       let sumPrice = JSON.parse(localStorage.getItem("price") || "[]"); 
       tariffVal.html(sumPrice) //вывожу данные в разметку из storage 
     })
   }
 });

Answer 1

[historydev]

Comments

[Andy Koshman]

Сделал всё как у вас, в проекте всё равно не сохраняет данные из storage в разметке. В чем же может быть дело? Может из за того что это ajax оно как та неправильно отрабатывает.

[historydev]

Andy Koshman, попробуйте ctrl+f5, возможно баг кеша, вы работаете на локалке или на удалённом сервере? Если на удалённом и там есть pm2, попробуйте перезапустить машину, были часто баги с тем, что данные не обновлялись

[Andy Koshman]

Кэш очищал с помощью ctrl + f5, работаю одновременно на локалке и параллельно правлю на хостинге, пока не работает. Во всяком случае как я понял код в ajax в принципе должен отрабатывать правильно и всё же нужно смотреть в сторону кеша?

[historydev]

Andy Koshman, success точно отрабатывает?

[Andy Koshman]

Владимир, Да, вот я с бэка получил такие данные, которые так же отрендерились в корзине. Код идентичный вашему, обобщенно такого вида:

$.ajax({
         url: urlTariffCalculationPassenger,
         method: "GET",
         data: TariffCalculationPassObj,
         success: function(result) {

           let res = 0;
           let sidebarItem = $('.sidebar-item')
           let tariffVal = $('#tariff-val')

           let sumPrice = parseInt(localStorage.getItem("price")) || 0;
           tariffVal.html(sumPrice)

           sidebarItem.each(item => {

             res += result.sum;

             localStorage.setItem("price", res);

             let sumPrice = parseInt(localStorage.getItem("price")) || 0;
             tariffVal.html(sumPrice)
           })
         }

При перезагрузке всё тот же 0 надоедливый.

[historydev]

Andy Koshman, попробуйте так:
tariffVal.html(123);

[Andy Koshman]

Владимир, 123 рендерится в корзине, но всё равно очищается при перезагрузке.

[historydev]

Andy Koshman, ваш запрос делается по какому действию? Вынестите вот это вне запроса тоже, чтобы оно отрабатывало при загрузке страницы:

let sumPrice = parseInt(localStorage.getItem("price")) || 0;
             tariffVal.html(sumPrice)

[Andy Koshman]

Владимир, Кстати да, я упустил почему то этот момент. Всё заработало как надо, спасибо большое за помощь, хорошего вечера!

[historydev]

Andy Koshman, Обращайтесь :)