0

Assuming I have a timer which will be activated by user click on a button, How can I save the data (current timer state and data) before user closes his browser and resume the timer after user visits the same page , taking into account the elapsed time between the two sessions.

My development is based on ASP.NET MVC4 and mostly I use ajax calls to service user interactions.

I am considering if there is a way that I can control this interaction and requirement via server-side code but I am skeptical about this.

What is your idea?

Active PHOENiX
  • 3
  • 4

3 Answers3

1

It is possible to do full on client side by using cookies.

Here is the flow:

  1. in the click event handler create a timer
  2. add event handler for browser close event (look here How to capture browser close event?)
  3. in browser close event handler get remaining time of timer (here you can find instructions find the time left in a setTimeout()?)
  4. write a cookie with that information
  5. on page load check if there is a cookie with time left info and recreate a timer with remaining time using setTimeout

I will try to update this post asap with more code examples.

UPDATE

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*/}
Community
  • 1
  • 1
kingpin
  • 1,498
  • 1
  • 11
  • 12
  • Thank you, Perfect answer as far as I see, but lets assume user has disabled cookie or as we know some malicious javascript/app code has disabled the cookie, do you think is there any other way to do the job? – Active PHOENiX Aug 20 '13 at 10:00
  • That's a little bit problematic, but there should be some way, I will let you know once get the solution. – kingpin Aug 22 '13 at 14:09
0

You could try creating a cookie with the current value on the unload event and then check for this when you start your timer again?

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

Look here for info on setting cookies in Javascript.

Community
  • 1
  • 1
Ant P
  • 24,820
  • 5
  • 68
  • 105
0

I would suggest to write some client-side Javascript to detect onunload and onbeforeunload events, and store the timer's value in the user's browser's local storage.

For handling the local storage I would suggest an excellent library: LawnchairJS. From the relevant documentation:

By default, Lawnchair will persist using DOM Storage but if other adapters are available and DOM Storage isn't supported by the currently executing JavaScript runtime. Lawnchair will attempt each successive adapter until it finds one that works.

Baradzed
  • 578
  • 3
  • 10
  • I think your solution is a good one but not for every scenarios, I feel it will complicate things and I need to use a 3rth party library besides javascript capabilities itself. If you think I am off about this please , clarify it. – Active PHOENiX Aug 20 '13 at 10:05
  • It all depends on the amount of data you plan to store. If it is just a few bytes, than it is perfectly OK to use cookies. If you plan to lean more heavily on client-side processing, and more than a few bytes of data will be stored on client's machine, it is often recommended to avoid storing a lot of data in cookies, as they will be sent to server with every request, and this may result in a significant overhead. – Baradzed Aug 20 '13 at 11:44
  • If under "data" in your question you meant storing Date/Time, then it is tiny enough to be stored in cookies. – Baradzed Aug 20 '13 at 11:47