How to get data from local storage?

Bachan Kubi 0
Viewed 44

As you see in my code below, When I reload the page, all my UI values change. I want to get data from locale storage after loading the page. Please help me to solve.

document.getElementById('btn-increase').addEventListener('click', ()=>{
    const countNumber = document.getElementById('count');
    const countStr = countNumber.innerText;
    const counts = parseInt(countStr);

    const countTotal = counts + 1;
    countNumber.innerText = countTotal;

    // set in local storage
    localStorage.setItem('count', countTotal);
    
});
const storage = ()=>{
    localStorage.getItem('count');
}
storage();
javascript
1 Answers

So set the element's text from local storage

const countNumber = document.getElementById('count');

document.getElementById('btn-increase').addEventListener('click', ()=>{
    const countStr = countNumber.innerText;
    const counts = parseInt(countStr);

    const countTotal = counts + 1;
    countNumber.innerText = countTotal;

    // set in local storage
    localStorage.setItem('count', countTotal);
    
});
const storage = ()=>{
    countNumber.innerText = localStorage.getItem('count') || 0;
}
storage();

How I would do it


    const outputElem =  document.getElementById('count');

    let countTotal = Number(localStorage.getItem('count') || 0);

    document.getElementById('btn-increase').addEventListener('click', ()=> {
      countTotal++;
      localStorage.setItem('count', countTotal); 
      updateOutput();
    });

    function updateOutput() {
      outputElem.textContent = countTotal;
    }

    updateOutput();
epascarello0
Related