How to make a multiple timer not to reset in php even if the page refreshes?

Question

I already check the answer from here and so how can I make it for multiple data. In order for me to set a timer for a specific service for example. So here is my script.

            <script type="text/javascript">
            //var minutes2 = currentTime.setMinutes(currentTime.getMinutes() + 30);
            function addMinutes(date, minutes) {
                return new Date(date.getTime() + minutes*60000);
            }
            var dat = new Date();
            //var tim = addMinutes(dat, 15);
            //console.log(tim); 

            function fixIntegers(integer)
            {
                if (integer < 0)
                    integer = 0;
                if (integer < 10)
                    return "0" + integer;
                return "" + integer;
            }

            $(function () { 
                $('.btn-start-timer').click(function(){
                    var i = window.setInterval(function(){

                        var future = addMinutes(dat, 60);
                        //var future = new Date("Dec 12 2013 22:10:00 GMT-0800 (Pacific Standard Time) ");
                        var now = new Date();
                        //console.log(tim);
                        var difference = Math.floor((future.getTime() - now.getTime()) / 1000);

                        var seconds = fixIntegers(difference % 60);
                        difference = Math.floor(difference / 60);

                        var minutes = fixIntegers(difference % 60);
                        difference = Math.floor(difference / 60);

                        var hours = fixIntegers(difference % 24);
                        difference = Math.floor(difference / 24);

                        var days = difference;
                    /*  $(this).parent().parent().find('.timer #seconds').text(seconds + "s");
                        $(this).parent().parent().find('.timer #minutes').text(minutes + "m");
                        $(this).parent().parent().find('.timer #hours').text(hours + "h");
                        $(this).parent().parent().find('.timer #days').text(days + "d");*/

                        $(".timer #seconds").text(seconds + "s");
                        $(".timer #minutes").text(minutes + "m");
                        $(".timer #hours").text(hours + "h");
                        $(".timer #days").text(days + "d");
                        if(hours == 0 && minutes == 0 && seconds == 0){
                             window.clearInterval( i );   
                            alert('times up');
                        }
                    }, 1000);

                });
            });

        </script>

And here is my the html:

        <table cellpadding="10">
            <tr>
                <th>Timer</th>
                <th>&nbsp;</th>
            </tr>
            <tr>
                <td class="timer">
                    <span id="days"></span>
                    <span id="hours"></span>
                    <span id="minutes"></span>
                    <span id="seconds"></span>
                </td>
                <td><button type="button" class="btn-start-timer">Start Now</button></td>
            </tr>
            <tr>
                <td class="timer">
                    <span id="days"></span>
                    <span id="hours"></span>
                    <span id="minutes"></span>
                    <span id="seconds"></span>
                </td>
                <td><button type="button" class="btn-start-timer">Start Now</button></td>
            </tr>
        </table>

How can I make the time not to reset once it is started?

Answer 1

Use the event :

onbeforeunload

To detect when your user leave your page. Then, send an ajax request. To handle your request, you simply want to save whatever information in a $_SESSION variable in posted.php.

// posted.php
session_start();
if ( isset ( $_POST['hours'] && isset ( $_POST['minutes'] && isset ( $_POST['seconds'] && )
{
    $_SESSION['hours'] = $_POST['hours'];
    $_SESSION['minutes'] = $_POST['minutes'];
    $_SESSION['seconds'] = $_POST['seconds'];
}

Then when your new page load / refresh you should have in your javascript your variable that are initialized.

var hours = <?php if ( isset($_SESSION['hours']) ) echo $_SESSION['hours'] else 0; ?>;
var minutes = <?php if ( isset($_SESSION['minutes']) ) echo $_SESSION['minutes'] else 0; ?>;
var seconds = <?php if ( isset($_SESSION['seconds ']) ) echo $_SESSION['seconds '] else 0; ?>;

Now understand that this is a shot in the dark since I have 0 idea about the way your application is built. If you're using some kind of framework it might not be that easy but if you're programming something small or procedural, then this will fit your needs.

EDIT: I understand that you have multiple timer, instead of using

$_SESSION['hours']

use

$_SESSION['idOfTimer']['hours']

Each timer will have his own timer.

Answer 2

在$ _SESSION或$ _COOKIE ['time']或localStorage中保存小时，分钟，秒，然后从中检索值。