页面刷新时如何保留ProgressBar进度条的运行状态？

当前实现的卡片内嵌计时器配套进度条，逻辑为每36秒进度值+1，满值100自动停止；存在的问题是页面刷新后JS运行时内存数据被清空，进度条直接重置为初始0值，需要实现刷新后保留进度状态，运行环境为Apache2 + MySQL(MariaDB)。
原有实现代码：

<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>

页面刷新会清空所有JS内存中的临时数据，要保留进度状态，必须把进度相关数据持久化到内存外的存储介质，根据业务场景选对应方案即可：

• 本地存储方案：适合仅当前用户可见、不需要跨设备同步的计时器，无需后端改动，上线成本最低。使用浏览器自带的localStorage存储进度值，每次进度更新同步写入存储，页面加载时优先读取存储值初始化进度条。注意用户清理浏览器缓存会清除这部分数据。
• 数据库持久化方案：适合多用户可见、需要跨设备/跨浏览器同步状态的计时器，匹配现有PHP+MySQL技术栈。给每个计时器分配唯一ID，每次进度更新时发异步请求把进度值、最后更新时间戳写入数据库，页面加载时先请求后端接口读取对应计时器的存储进度，再初始化进度条启动计时。

这个版本无需改动后端，替换原有代码即可实现刷新保留进度：

<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(){
  // 每个计时器配置独立的存储key、计时间隔即可支持多卡片独立计时
  const TIMER_STORAGE_KEY = 'timer1_progress';
  const TIMER_STEP_INTERVAL = 36000;
  // 页面加载优先读取本地存储的进度值，无存储则默认从0开始
  let currentProgress = parseInt(localStorage.getItem(TIMER_STORAGE_KEY) || 0);
  $('.timer1').val(currentProgress);
  // 进度已满值则直接不启动计时
  if(currentProgress >= 100) return;

  $.ii('t1', TIMER_STEP_INTERVAL, function(){
    let nowVal = parseInt($('.timer1').val());
    if(nowVal < 100){
      nowVal += 1;
      $('.timer1').val(nowVal);
      // 每次进度更新同步写入本地存储
      localStorage.setItem(TIMER_STORAGE_KEY, nowVal);
    }else{
      $.ii('t1');
    }
  });
});
</script>

如果需要跨端同步，按以下步骤实现即可：

1. 先在MySQL中创建计时器状态存储表：

CREATE TABLE `timer_status` (
  `timer_id` varchar(32) NOT NULL COMMENT '计时器唯一标识，和卡片绑定',
  `progress` tinyint unsigned NOT NULL DEFAULT 0 COMMENT '进度值 0-100',
  `last_update_ts` int NOT NULL COMMENT '最后更新时间戳',
  PRIMARY KEY (`timer_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

2. 编写两个PHP接口：一个接收GET参数timer_id返回对应进度，一个接收POST参数写入最新进度到数据库。
3. 把本地存储版代码中读写localStorage的逻辑，替换为AJAX请求调用对应PHP接口即可。

优化提示：存储进度时不要只存进度数值，额外存最后一次更新的时间戳，页面加载时计算距离上次更新经过的时长，自动补齐中间跳过的进度值，避免用户长时间关闭页面后再打开，进度和实际应走时长不一致的问题。

内容的提问来源于stack exchange，提问作者Dayreff