简体   繁体   中英

How to get data from local storage?

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();

this way...

const 
  Bt_increase = document.querySelector('#btn-increase')
, Elm_counter = document.querySelector('#count')
  ;

// zero is initial value when localStorage count element doesn't exist
var count = parseInt((Storage.getItem('count') || '0'),10);

// set Counter value on page
Elm_counter.textContent = count

Bt_increase.onclick = evt =>
  {
  localStorage.setItem('count', ++count)
  Elm_counter.textContent = count
  }

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();

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM