CODEWITHSUNDEEP
javascriptjquery
Van Adrian Cabrera
Van Adrian Cabrera

Reputation: 713

Javascript: How to prevent time limit reset when refresh?

I'm having a problem with the time limit coz when the page is reload/refresh the time limit reset.

P.S: I used this time limit to my online quiz program and I'm using a header location to move to next question.

HTML

<label id="time">1:00</label>

JAVASCRIPT

function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
    minutes = parseInt(timer / 60, 10)
    seconds = parseInt(timer % 60, 10);

    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

        localStorage.setItem('time_remaining_min', minutes);
        localStorage.setItem('time_remaining_sec', seconds);

        var minutes_left = localStorage.getItem('time_remaining_min');
        var seconds_left = localStorage.getItem('time_remaining_sec');

        display.text(minutes_left + ":" + seconds_left);

    if (--timer < 0) {
        //finished
    }
   }, 1000);
 }

 jQuery(function ($) {
  var fiveMinutes = 60 * 5,
    display = $('#time');
 startTimer(fiveMinutes, display);
});

EDIT: I tried to use local storage but didn't work

        localStorage.setItem('time_remaining_min', minutes);
        localStorage.setItem('time_remaining_sec', seconds);

        var minutes_left = localStorage.getItem('time_remaining_min');
        var seconds_left = localStorage.getItem('time_remaining_sec');

        display.text(minutes_left + ":" + seconds_left);

Upvotes: 0

Views: 270

Answers (3)

Matt
Matt

Reputation: 1580

You can store the time in a cookie.

//Set cookie
time_remaining = 200;
$.cookie('time_remaining', time_remaining);

//Retrieve cookie
time_remaining = $.cookie('time_remaining');

You should be able to easily implement the above into your code (Hint: whenever the timer decreases, save time remaining in a cookie).

Note that this isn't that secure, users can easily clear and modify cookies in their browser. If you're looking for something more secure you'll need to implement some backend functionality.

Upvotes: 0

Vasyl Moskalov
Vasyl Moskalov

Reputation: 4630

Store timer value either in cookie or in local storage.

Upvotes: 2

Aaron Wagner
Aaron Wagner

Reputation: 317

Not sure that you will ever be able to get around this with a page refresh. Maybe the better answer would be to not to the page reload, and use AJAX to do whatever you need to do.

Upvotes: 0

Related Questions