Progress bar with localstorage (js)

Question

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?

Answer 1

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.