I'm using countdown with progress bar like this https://codepen.io/Rudchyk/pen/qNOEGj but I can't figure out how do I save the progress when I reload the page?
<div id="progressBar">
<div class="bar"></div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
var seconds = {$timer_limited->sec}; // 10000
$(document).ready(function () {
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({ width: progressBarWidth }, 500);
if(timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
progress(seconds, seconds, $('#progressBar'));
});
</script>
<style>
#progressBar {
width: 100%;
height: 4px;
background-color: #DDDFE2;
}
#progressBar div {
height: 100%;
line-height: 22px;
width: 0;
background-color: #D03637;
}
</style>
how do I save the progress when I reload the page?
function progress() {
var progressBarWidth = timeLeft * $progressBar.width() / totalTime;
$filler.animate({ width: progressBarWidth }, 500).html(Math.floor(timeLeft/60) + ":"+ timeLeft%60);
timeLeft--
localStorage.setItem('timeleft', timeLeft)
if(timeLeft < 0) {
clearInterval(interval)
}
};
const $progressBar = $('#progressBar')
const $filler = $progressBar.find('div')
const totalTime = 600
var timeLeft = localStorage.getItem('timeleft') ?? totalTime
const interval = setInterval(progress, 1000)
I rewrote your code a bit, but it's essentially the same. The only thing I added is the localStorage part, where I first request the 'timeleft' variable from storage and I reset the clock if it isn't found. I always update the data stored, so it's up to date.