0

Начал учить localstorage и возникла ошибка.

let balance = 0;
Array.from(document.querySelectorAll(".item_add")).forEach(item => {
  item.addEventListener("click", event => {
    let sum = event.target.parentElement.nextElementSibling.textContent;
    sum = parseInt(sum.replace(/[^0-9]/g, ""));
    balance += sum;
    alert("balance = " + balance)
    localStorage.setItem("balance", balance)
    document.getElementById('purse').innerHTML = localStorage.getItem("balance");
    console.log(localStorage.getItem("balance"))
  })
})
<h4><a class="item_add" href="#"><i class="itemAdd">#</i></a> <span class=" item_price">20</span></h4>
Этот код берет значение .item-price , запихивает в переменную balance и выводит alert() со значением переменной balance.

Но почему-то localstorage здесь не работает.Я сделал все как сказано в https://learn.javascript.ru/localstorage но почему-то при перезагрузке страницы переменная balance обнуляется.Можете подсказать почему так происходит и как это пофиксить.

Upd:appliaction в хроме вот что показывает хром

1
  • 1
    Как минимум, первую строку замените на эту let balance = +(localStorage.getItem("balance") || 0);
    – Deonis
    25 авг 2020 в 23:12

1 ответ 1

0

Может потому что вы не загружаете начальное значение из localStorage во время загрузки. Как указали вам в комментариях выше.

let balance = 0;
Array.from(document.querySelectorAll(".item_add")).forEach(item => {
  item.addEventListener("click", event => {
    let sum = event.target.parentElement.nextElementSibling.textContent;
    sum = parseInt(sum.replace(/[^0-9]/g, ""));
    balance += sum;
    alert("balance = " + balance)
    localStorage.setItem("balance", balance)
    document.getElementById('purse').innerHTML = localStorage.getItem("balance");
    console.log(localStorage.getItem("balance"))
  })
});

if(!localStorage.getItem("balance")) {
  let element = document.getElementById("balance");
  element.innerHtml = localStorage.getItem("balance");
} 
<h4><a class="item_add" href="#"><i class="itemAdd">#</i></a> <span class=" item_price" id="balance">20</span></h4>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.