Jquery倒计时但如果页面刷新/ F5仍然保持计时器

Question

我正在寻找 jquery 插件倒计时，但如果页面刷新仍然保持 conter。我正在申请问卷，我想在 60 分钟之前显示倒数计时器。我的应用程序现在如果用户登录开始回答问题，他会一一回答，该问题是每页一个问题。因此，如果下一个问题页面将刷新。所以现在如果用户想回答下一个问题倒数计时器将重置为默认值。 现在我正在使用 jquery 插件这个http://keith-wood.name/countdown.html

带代码：

   $(function () {
        var d = new Date();
        d = new Date(d.getFullYear(), d.getMonth(), d.getDate(), d.getHours(), d.getMinutes()+59, 59);
        $('#defaultCountdown').countdown({until: d, format: 'MS'});
    });

所以我的问题是，如果页面刷新而将计时器重置为默认值，是否有插件倒计时计时器。

谢谢。

Answer 1

您可以将初始日期存储在localStorage 中，并在页面刷新后尝试从那里恢复它。回答完问题后，您可以从localStorage删除日期

$(function () {
  var d = localStorage.getItem('date');
  if(!d) {
    d = (new Date()).getTime() + 3599000;
    localStorage.setItem('date', d);
  } else {
    d = parseInt(d);
  }
  $('#defaultCountdown').countdown({until: new Date(d), format: 'MS'});
});

function goNext() {
  localStorage.removeItem('date');
  // Go to next question
  ...
}

工作示例：http://jsbin.com/oxovih/2/edit

Answer 2

您可以通过将截止日期保存在 cookie 中来做到这一点，并在每次请求时从该 cookie 中获取值。您的代码会稍微复杂一点，但它会完成这项工作。你需要jQuery Cookie plugin，你可能需要read up on how to use it。

This is what I come up with。您可以更改 withCookie 的值以查看保存和不保存请求之间的截止日期之间的区别（单击“运行”而不是重新加载 - 实际上，它会做同样的事情）。由于我找不到托管您正在使用的倒计时插件的 CDN，因此我只打印了截止日期 - 但由于您想要确保截止日期保持固定，您现在唯一需要做的就是生成jsFiddle中的deadline date变量das（秒除外），然后调用

$('#defaultCountdown').countdown({until: d, format: 'MS'});