在页面刷新期间持续存在的 Javascript 倒计时

Posted 2023-04-01

【中文标题】在页面刷新期间持续存在的 Javascript 倒计时

【英文标题】：Javascript countdown that persists across page refresh

【发布时间】：2017-01-06 18:23:24

【问题描述】：

我正在尝试进行倒计时，刷新此页面后不会重新启动。我正在使用 keith wood 倒计时。我想数到 5 分钟。

var countdownTarget = localStorage.getItem('countdownTarget');
    if (countdownTarget === null) 
    
        var countdownTarget = new Date();
        countdownTarget = new Date(countdownTarget.getFullYear(), countdownTarget.getMonth(), countdownTarget.getDate(), countdownTarget.getHours(), countdownTarget.getMinutes() + 5, countdownTarget.getSeconds());
        localStorage.setItem('countdownTarget', countdownTarget);
    

    $('#defaultCountdown').countdown( until : countdownTarget, format: 'MS', compact: true);

我将当前日期 + 5 分钟作为 countdownTarget 保存到浏览器本地存储中（仅在之前未完成的情况下）。如果用户刷新页面，时间应该是持久的。但是有问题。当我第一次加载页面时，时间从 5 分钟开始计算（这应该是正常的），但是当我再次尝试刷新它时，它从 36 分钟开始计算，我不知道为什么，我也不知道这 36 分钟是从哪里来的。

【问题讨论】：

36 分钟从何而来？在您的代码示例中看不到类似的内容。

你可能不是想通过说 var = 来影响 countdownTarget if null

我很确定 localStorage 将数据存储为字符串。如果您从 localStorage 加载存储的字符串，然后将其添加到 int，您将不会获得预期的结果。在将其添加到计数器之前，您需要将该存储的字符串转换回 int。

@Korgrue 谢谢！你是对的。现在我解决了这个问题。

【参考方案1】：

与其重新声明日期，不如直接增加分钟数？你的代码对我有用。此外，您应该只启动一次countdownTarget。

var countdownTarget = localStorage.getItem('countdownTarget');
if (countdownTarget === null) 
    countdownTarget = new Date();
    countdownTarget.setMinutes(countdownTarget.getMinutes() + 5);
    localStorage.setItem('countdownTarget', countdownTarget);
 else 
    countdownTarget = new Date(countdownTarget);

$('#defaultCountdown').countdown( until : countdownTarget, format: 'MS', compact: true);