I have this script for to increment a counter by one after 1 second , but when I refresh the page I need to remember the last number I counted.
Example: Currently, I have 40. When I refresh the page I need to start counting after 40 not reset to 1. Is this possible?
function animateValue(id) {
var obj = document.getElementById(id);
var current = parseInt(obj.innerHTML);
setInterval(function() {
current++;
// Update the contents of the element
obj.innerHTML = current;
}, 1000);
}
animateValue('value');<h1>
<div id="value">1</div>
</h1>You can store the counter progress in localStorage, then retrieve the value on page load and start counting from there:
var obj = document.getElementById("value");
let counterStorage = localStorage.getItem('counter')
if(counterStorage) obj.innerHTML = counterStorage
function animateValue(id) {
var current = parseInt(obj.innerHTML);
setInterval(function() {
current++;
localStorage.setItem('counter', current)
obj.innerHTML = current;
}, 1000);
}
animateValue('value');
Use localstorage. If not exists then set and if exists use the value from localstorage.
function animateValue(id){
const obj = document.getElementById(id);
let current = parseInt(obj.innerHTML);
const storageTime = localStorage.getItem("mytime")
if ( storageTime === null) {
localStorage.setItem("mytime", current);
} else {
current = storageTime;
}
setInterval(function(){
current++;
localStorage.setItem("mytime", current);
// Update the contents of the element
obj.innerHTML = current;
},1000);
}
animateValue('value'); <h1><div id="value">1</div></h1>you can use window.localstorage. the code will look something like this
window.localstorage.setItem('timer', timer)