Всем добрый, есть кнопка "remove" функционалом которой является удаление всех данных из localStorage c помощью метода localStorage.clear(), в данном случае при клике на "remove" удаление срабатывает правильно и localStorage чистится, но если я еще раз нажму на кнопку "add", то предыдущие удаленные объекты вновь появятся в массиве + новый объект. Я понимаю что проблема заключается в том, что переменная getItem находится в глобальном scope и из за этого оно работает не корректно. Подскажите пожалуйста как можно это решить.
https://jsfiddle.net/e19z43t0/7/
const info = document.querySelector('.info')
const button = document.querySelector('.button')
const removeAllStorage = document.querySelector('.remove-storage')
const currentCars = JSON.parse(localStorage.getItem("cars") || "[]");
const renderCars = (cars = currentCars) => {
[...cars].forEach((item) => {
info.insertAdjacentHTML(
"beforeend",
`<div class="item" id="${item.car}"></div>`
)
})
}
renderCars()
button.addEventListener('click', function() {
const cars = {
cars: 'cars'
}
currentCars.push(cars);
renderCars([cars]);
function updateState() {
localStorage.setItem("cars", JSON.stringify(currentCars));
}
updateState()
})
removeAllStorage.addEventListener('click', function() {
localStorage.clear();
const currentCars = JSON.parse(localStorage.getItem("cars") || "[]");
localStorage.setItem("cars", JSON.stringify(currentCars));
})
