Php Jquery倒计时计时器在页面刷新时没有重置？

我有一段完美的代码。当按下按钮时，计时器倒计时，直到可以再次按下

问题：刷新页面时，页面将被重置，他们必须在再次倒计时之前再次单击页面

目标：在他们离开的任何时间重新开始的计时器

我的应用程序是

PHP

和

MySQL

，如果这样做效果最好的话，但下面是我正在使用的代码

有人知道我是如何获得我想要的功能的吗

JS

$('.trigger').on('click', function(e) {
    $(this).html('show')
    $('.show').slideUp('medium');
    var count = 10,
        counter = setInterval(timer, 1000);

    function timer() {
        count--;
        if (count <= 0) {
            clearInterval(counter);
            $('.trigger').html('hide');
            $('.show').slideDown('medium');
            return;
        }
        console.log(count);
        $('.timer').html(count);
    }
});

function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    } else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

$('.trigger').on('click', function (e) {
    $(this).html('show')
    $('.show').slideUp('medium');
    var count = 10;
    if (readCookie("timer") != undefined) count = readCookie("timer");

    var counter = setInterval(timer, 1000);

    function timer() {
        createCookie("timer", count, 365);
        count--;
        if (count <= 0) {
            clearInterval(counter);
            $('.trigger').html('hide');
            $('.show').slideDown('medium');
            eraseCookie("timer");
            return;
        }
        console.log(count);
        console.log(readCookie("timer"));
        $('.timer').html(count);
    }
});

$（'.trigger'）。在（'click'，函数（e）上{
$（this.html（'show'））
$（'.show'）.slideUp（'medium'）；
var计数=10，
计数器=设置间隔（计时器，1000）；
函数计时器（）{
计数--；
如果（count，问题在于Javascript不能保持这种状态。每次加载页面时，它都从0开始

对于您需要的功能，您应该在单击计时器停止按钮时保存cookie，并在页面加载时读取它，以查看它是否保存了值，然后从第二个0开始

请参阅：
要实现您的目标，有两种方法：

Cookies或数据存储：如果您可以信任您的客户，则此方法很好




数据库存储：您可以对后端进行ajax调用，并存储用户单击的内容。此方法的问题是，每秒钟都必须重新发送到数据库


你看到你所看到的东西的原因：

流程如下所示：

服务器端代码->向客户端发送数据->浏览器开始渲染和执行JS

您已经到了最后一步，因为web是无状态的，所以您不会将信息存储在JavaScript客户端前端

下面是一个为您量身定制的示例，使用上述信息：

演示：

JS

$('.trigger').on('click', function(e) {
    $(this).html('show')
    $('.show').slideUp('medium');
    var count = 10,
        counter = setInterval(timer, 1000);

    function timer() {
        count--;
        if (count <= 0) {
            clearInterval(counter);
            $('.trigger').html('hide');
            $('.show').slideDown('medium');
            return;
        }
        console.log(count);
        $('.timer').html(count);
    }
});

function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    } else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name, "", -1);
}

$('.trigger').on('click', function (e) {
    $(this).html('show')
    $('.show').slideUp('medium');
    var count = 10;
    if (readCookie("timer") != undefined) count = readCookie("timer");

    var counter = setInterval(timer, 1000);

    function timer() {
        createCookie("timer", count, 365);
        count--;
        if (count <= 0) {
            clearInterval(counter);
            $('.trigger').html('hide');
            $('.show').slideDown('medium');
            eraseCookie("timer");
            return;
        }
        console.log(count);
        console.log(readCookie("timer"));
        $('.timer').html(count);
    }
});

函数createCookie（名称、值、天数）{
如果（天）{
变量日期=新日期（）；
date.setTime（date.getTime（）+（天*24*60*60*1000））；
var expires=“；expires=“+date.togmString（）；
}else var expires=“”；
document.cookie=name+“=”+value+expires+“path=/”；
}
函数readCookie（名称）{
变量nameEQ=name+“=”；
var ca=document.cookie.split（“；”）；
对于（变量i=0；i如果（只算一个建议，你仍然可以使用实时来解决这个问题，因此如果用户刷新它并不重要，因为你的功能违反了实时time@GunrJesra这将不允许计数器继续，因为您没有其他时间进行比较，因此无法进行时间跨度比较。谢谢，我不知道HTML5存储…可能在一个新项目中使用。好吧，在这种情况下，我有没有办法确保在他们离开页面或刷新页面之前给他们一个警告，返回时会有60秒的延迟，然后在他们返回时留出60秒的时间？问题是我不想每秒调用数据库，但成员可以如果一个人知道如何更改cookie，那么他就不值得信任了，因为其他每个成员都会处于不利地位。@Jorge It绝对是很棒的，但不幸的是它不支持旧的IEs。@user2579862绝对是这样，你会希望在页面左侧捕获：$（窗口）。unload（函数（）{alert（“Bye now！”；}）；实际上cookie路由是什么样子的？