How to realize cross page timer?

Question

I am trying to realize booking system on my site. I want to allow user to book terminal entity for 10 minutes. Entirely, flow is enough big and goes over several pages.
While user navigate on this flow he should see how many time he has to complete operation.

Please advice me how to realize cross page timer.

Answer 1

I think the most straightforward way would be to create a cookie or an item in the user's localStorage which contains the start time of the transaction. Upon loading the page, you check for the existence of this value and compare it to the current time, if it exists.

Answer 2

You can use setTimeout or setInterval to run timers in the browser. However, a browser window is not guaranteed to continue to execute when it is not active. If the user hides the browser or goes to another application, the application cannot be sure that the timer is still running.

There is a newer specification for threading called web workers, which may help to alleviate the setTimeout problem.

https://developer.mozilla.org/en-US/docs/Web/API/Worker

As an alternative, I would suggest to store the start time on the server and continuously check the current time against it with polling HTTP requests. Or maybe just check it before they submit.

Or as stated by @sholanozie , store it in a browser cookie and just keep checking that.