倒计时计时器的可能性-Javascript

是否有可能在使用按钮的方法时激活倒计时计时器，并在刷新网页时保持运行？我曾经尝试过实现一个倒计时计时器，当点击按钮时它会被激活，但当网页刷新时，计时器会继续正常运行，但不会显示在网页中。因此，当用户再次按下按钮时，计时器将重新启动，包括上次停止的时间。有人能解释一下吗？我发表的文章多得数不清，但没有人帮忙

编辑 有了这段代码，计时器运行得很好，但当页面刷新时不会更新到span元素，当计时器用完时按钮不会重新启动计时器，这真是令人讨厌！此外，刷新页面时，按钮不会保持禁用状态

var按钮=document.querySelector（“#coinbtn1”）；
var label=document.querySelector（“倒计时1”）；
无功定时器；
var countdown=localStorage.getItem（“倒计时”）|| 60；
按钮。addEventListener（“单击”，函数（e）{
var uid=firebase.auth（）.currentUser.uid；
var coinRef=firebase.database（）.ref（）.child（'users_coins'）.child（uid）.child（'coins'）；
var计数器=50；
coinRef.交易（功能（计数器）{
返回（计数器| | 0）+50；
});
如果（！计时器）{
倒计时=10；
计时器=设置间隔（函数（）{
document.getElementById（'coinbtn1'）。disabled=true；
倒计时--；
label.innerText=倒计时+s；
setItem（“倒计时”，倒计时）；
如果（倒计时您可能会将该行为附加到localStorage中的一个新日期（）和一个变量。isTimerActive=true，initialTime=（每当单击按钮时）。只需选中“在窗口加载时更新值”（选中isTimerActive，如果是，则根据initialTime+new Date（）更新计数器）在你需要的任何单位）

希望它有意义
您可能会将该行为附加到localStorage中的一个新日期（）和一个变量。类似于isTimerActive=true，initialTime=（每当单击按钮时）。只需在窗口加载时检查更新值（如果是，则检查isTimerActive，然后根据initialTime+new Date（）更新计数器）在你需要的任何单位）

希望这是有意义的
网页是无状态的。每次加载网页时，就像浏览器第一次看到它一样。因此，当您重新加载网页时，浏览器没有上一次倒计时的内存，并且所有变量都会重新初始化

要使倒计时有状态，您需要在两次调用之间存储其值。一种简单的方法是使用，这是每个网页从浏览器获取的键值存储。您可以使用以下方法将值放入其中：

localStorage.setItem('countdown', countdown);

然后使用以下工具重新加载：

var countdown = localStorage.getItem('countdown');

倒计时计时器的一个简单示例如下：

var-button=document.querySelector（“按钮”）；
var标签=document.querySelector（“span”）；
无功定时器；
var countdown=localStorage.getItem（“倒计时”）|| 60；
按钮。addEventListener（“单击”，函数（e）{
如果（！计时器）{
倒计时=10；
计时器=设置间隔（函数（）{
倒计时--；
label.innerText=倒计时+s；
setItem（“倒计时”，倒计时）；
if（countdown网页是无状态的。每次加载网页时，就像浏览器第一次看到它一样。因此，当重新加载网页时，浏览器没有上一次倒计时的内存，所有变量都会重新初始化

要使倒计时有状态，您需要在两次调用之间存储其值。一种简单的方法是使用，这是每个网页从浏览器获取的键值存储。您可以使用以下方法将值放入其中：

localStorage.setItem('countdown', countdown);

然后使用以下工具重新加载：

var countdown = localStorage.getItem('countdown');

倒计时计时器的一个简单示例如下：

var-button=document.querySelector（“按钮”）；
var标签=document.querySelector（“span”）；
无功定时器；
var countdown=localStorage.getItem（“倒计时”）|| 60；
按钮。addEventListener（“单击”，函数（e）{
如果（！计时器）{
倒计时=10；
计时器=设置间隔（函数（）{
倒计时--；
label.innerText=倒计时+s；
setItem（“倒计时”，倒计时）；
如果（倒计时Javascript变量无法在页面（重新）加载之间持久化，那么您需要某种形式的持久化。根据您的需要，有多种方法可以解决此问题：


存储在URL中-您可以使页面将倒计时目标作为一个片段（例如
page.html#20181111-035625
，其中时间戳目标可以是您的结束时间，单位为秒、毫秒或作为日期时间表示（注意
：
和空格）。当用户按下按钮时，您将引导他们进入添加了正确片段的页面

优点：目标时间可以作为URL共享。易于实现。即使在古老的浏览器中也支持，而不是通过清除本地存储/关闭浏览器来清除

缺点：如果用户（重新）打开相同的URL，则只能看到相同的倒计时，因此关闭窗口并重新导航到主页会丢失倒计时。用户可能会被错误的URL误导，错误的倒计时




会话存储或本地存储-前者持续到浏览器关闭，后者持续到浏览器关闭

优点：与URL无关。在任何相关内容上都得到广泛支持（小心真正的旧浏览器，如IE<8）

缺点：绑定到特定浏览器/设备/源。如果用户在其他设备上打开页面，他们将看不到计时器




服务器端存储-在某种形式的持久化后端（数据库等）上存储计时器目标/状态

优点：在设备/浏览器/会话间持续存在。Mos