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.