Keep the status of a ProgressBar

Question

im new on Javascript and PHP, im coding some timers on cards, but this timers need go displayed with his own progressbar

this is what i just got

<progress class="timer1" value="0" max="100">
            </progress> 
            <script src="jQuery.js">
            </script> 
            <script>
            var ar;
             $(document).ready(function(){
               var _sI=[];
               $.ii=function(){
                 ar=arguments;
                 if(ar.length==3){
                   if(_sI[ar[0]]==undefined){
                     _sI[ar[0]]={};
                     }else{
                       clearInterval(_sI[ar[0]].reg);
                       } _sI[ar[0]].fn=ar[2];
                       _sI[ar[0]].t=ar[1];
                       _sI[ar[0]].reg=setInterval(ar[2],ar[1]);
                       }else if(ar.length==1){
                         clearInterval(_sI[ar[0]].reg);
                         }}});
            </script> 
            <script>
            $( document ).ready(function(){
              $.ii('t1',36000,function(){
                t1v=$('.timer1').val();
                if(t1v<100){$('.timer1').val(t1v+1);
                }else{$.ii('t1');
                } });
                 });
            </script>

this works GOOD,the bar got increase his size each 36 seconds, my issue here is

i need to do refreshes to the page, at this moment the bar got reset, theres any way to keep the status of the bar through the refreshes?

im coding this on a apache2 server linked to a Mysql (MariaDB)

Answer 1

Yes save it in the localStorage

$(document).ready(function () {
    var value = localStorage.getItem("timer1_value") || 0;
    $('.timer1').val(value);
    $.ii('t1', 36000, function () {
        var t1v = $('.timer1').val();
        if (t1v < 100) {
            $('.timer1').val(t1v + 1);
            localStorage.setItem("timer1_value", t1v + 1)
        } else {
            localStorage.removeItem("timer1_value");
            $.ii('t1');
        }
    });
});