javascript - Error when trying to recall saved data using localStorage

Question

I'm trying to display the counter on the innerHTML of the element, however, after pressing refresh on the document the counter disapears. I have no errors on my console either. Any suggestions? Thanks:

let CartCounter = document.getElementById("TotalItems");
let CartNumber = 0;

buttonFirst.addEventListener("click", function (event) {
  event.preventDefault();

CartNumber += 1;
let CartStorage_Serialized = JSON.stringify(CartNumber);
localStorage.setItem("cartItems", CartStorage_Serialized);
let CartStorage_Deserialized = JSON.parse(localStorage.getItem("cartItems"));
CartCounter.innerHTML = CartStorage_Deserialized;

}

标签： javascriptdom

Answer 1

When you're checking the contents of an html element with something like innerHTML, you need to be sure the page has rendered first. Therefore, it's a good idea to stick it in a window.load listener like the code below.

Then, in that same listener, you can check localStorage for the value and if it's there, put it in the innerHTML.

In your button click, you can grab the current value for CartCounter, and to keep it a number (because when you get it from the innerHTML it will be a string), put a + in front of it. Then you can add 1 and save it back to localStorage. If you're just storing numbers like this, you don't need to serialize the values.

let CartCounter
window.addEventListener('load', () => {
  CartCounter = document.getElementById("TotalItems");
  CartCounter.innerHTML = localStorage.getItem('cartItems') ? localStorage.getItem('cartItems') : 0;
})
let CartNumber = 0;

buttonFirst.addEventListener("click", (event) => {
  event.preventDefault();
  let CartNumber = +document.getElementById("TotalItems").innerHTML;
  CartNumber ++;
  localStorage.setItem("cartItems", CartNumber);
  CartCounter.innerHTML = CartNumber;
}