I have a countdown timer. This timer is called in an ajax call whenever user press a button.
I would like to set timer (countdown) in localStorage and get timer (countdown) after page refresh. Could you please help me to implement this in the below code?
const progressBox = document.getElementById('progress-box')
const activateProgress = (progress) => {
if (progress.toString().length < 2) {
progressBox.innerHTML = `<b>0${progress}:00</b>`
progressBox.innerHTML = `<b>${progress}:00</b>`
} else {
progressBox.innerHTML = `<b>${progress}:00</b>`
}
let minutes = progress - 1
let seconds = 60
let displaySeconds
let displayMinutes
const timer = setInterval(()=>{
seconds --
if (seconds < 0) {
seconds = 59,
minutes --
}
if (minutes.toString().length < 2) {
displayMinutes = '0' + minutes
} else {
displayMinutes = minutes
}
if (seconds.toString().length < 2) {
displaySeconds = '0' + seconds
} else {
displaySeconds = seconds
}
if (minutes === 0 && seconds === 0) {
setTimeout(()=>{
clearInterval(timer)
alert('Time Over')
}, 500)
}
progressBox.innerHTML = `<b>${displayMinutes}:${displaySeconds}</b>`
}, 1000)
}
const checkInForms = [...document.getElementsByClassName('checkin-forms')]
checkInForms.forEach(form=> form.addEventListener('submit', e=>{
e.preventDefault()
const clickedCheckinId = e.target.getAttribute('data-form-id')
const clickedCheckinBtn = document.getElementById(`mark-checkin-btn-${clickedCheckinId}`)
$.ajax({
type: 'POST',
url: "checkin/",
data: {
'csrfmiddlewaretoken': csrftoken,
'pk': clickedCheckinId,
},
success: function(response){
console.log(response)
activateProgress(response.progress)
localStorage.setItem('progress', response.progress)
},
error: function(error){
console.log(error)
}
})
}))
Many Thanks