如何使定时器从20到0开始，永远运行?

Question

我的意思是当我从20秒开始计时，然后关闭浏览器，计时器继续在后台运行，当我再次打开它时，计时器会像10秒一样直到0，然后从20秒开始重复，永远如此。

我已经在js中编写了这段代码，但问题是代码在客户端运行，这意味着当我退出并再次进入计时器时，计时器将再次从20开始。

<p id="demo"></p> 
<script>
var rtime = 4;
const irtime = 4; // initial time for resetting  

function rF(){
setTimeout(() => {
var x = document.getElementById("demo").innerHTML = rtime;
if(rtime > 0){
rtime-- ;
rF();
}else{
rtime = irtime;
rF();
}
}, 1000);
}
rF();
</script>

Answer 1

您可以将之前的时间存储在localStorage中，然后在页面加载时检索时间并将其分配给rtime:

<p id="demo"></p>
<script>
var rtime = localStorage.getItem("last-time");
const irtime = 4; // initial time for resetting  
rtime = !rtime ? 4 : rtime;
function rF() {
setTimeout(() => {
var x = document.getElementById("demo").innerHTML = rtime;
if (rtime > 0) {
rtime--;
rF();
} else {
rtime = irtime;
rF();
}
localStorage.setItem("last-time", rtime)
}, 1000);
}
rF();
</script>

演示:https://jsfiddle.net/Spectric/h8kgjo5d/