如何在浏览器会话关闭后恢复客户端计时器

本文关键字：恢复 客户端 计时器 浏览器 会话 | 更新日期: 2023-09-27 18:28:22

假设我有一个计时器，它将由用户点击按钮激活，我如何在用户关闭浏览器之前保存数据（当前计时器状态和数据），并在用户访问同一页面后恢复计时器，同时考虑到两个会话之间的时间。

我的开发基于ASP.NET MVC4，主要使用ajax调用为用户交互提供服务。

我正在考虑是否有一种方法可以通过服务器端代码控制这种交互和需求，但我对此持怀疑态度。

你的想法是什么？

如何在浏览器会话关闭后恢复客户端计时器

使用cookie可以在客户端完成全部操作。

流程如下：

  1. 在单击事件处理程序中创建一个计时器
  2. 为浏览器关闭事件添加事件处理程序（请参阅此处如何捕获浏览器关闭事件？）
  3. 在浏览器关闭事件处理程序中获取计时器的剩余时间（在这里你可以找到指令，在setTimeout（）中找到剩余时间？）
  4. 用这些信息写一个cookie
  5. 在页面加载时，检查是否有带有剩余时间信息的cookie，并使用setTimeout重新创建带有剩余时间的计时器

我会尽快更新这篇文章，并附上更多的代码示例。

更新

var timeLeft= $.cookies('timeLeft') || ORIGINAL_VALUE;
var timer = setTimeout(myFunc, timeLeft);
$(window).unload(function(){
  var timeLeftToSave = getTimeLeft(timer);
  $.cookies('timeLeft', timeLeftToSave, { path: '/' });
})
//Use code from the second link here
function getTimeLeft(timer){
}

function myFunc(){/*YOUR CODE HERE*/}

您可以尝试在unload事件上创建一个具有当前值的cookie，然后在再次启动计时器时检查它吗？

$(window).unload(function() {
    // Set a cookie with current timer value
});

在这里查看有关在Javascript中设置cookie的信息。

我建议编写一些客户端Javascript来检测onunload和onbeforeunload事件，并将计时器的值存储在用户浏览器的本地存储中。

对于处理本地存储，我建议使用一个优秀的库：LawnchairJS。来自相关文件：

默认情况下，Lawnchair将使用DOM存储进行持久化，但如果其他适配器可用，并且DOM存储不受当前正在执行JavaScript运行时。Lawnchair将尝试连续的适配器，直到它找到一个工作的适配器。

相关文章：