How to make countdown timer which will change after one day automatically and do not start again after refreshing the page

1

I have a page in which there is a counter which will restart again after one day of interval automatically , I want to make this counter and how I can set countdown timer that always continue countdown if I refresh the browser?

2

If it always restarts at the same time, you just set the countdown to current time minus the start time and have it run on a timeout every whatever the interval is. It doesn’t matter if the browser refreshes, or is closed or whatever, when the page opens, the countdown will always be calculated anew.

If it doesn’t, you could save the last value to local storage using the “unload” event, when the browser is unloading the page (ie the user has navigated away or refreshed). Then when the page comes back up, read from local storage and calculate based on the current time.

Or put the timer on a server. When the page is opened, make a request to the server and get the current time and run the in-browser timer from there.

All of these have issues, and the timer will drift, so you need to handle that. Making long running timers is not a simple thing, in-browser JS is not very suited to it

3

How to do it any idea?

4

With your current questions, we don’t have enough context to know what you already know or don’t know, so it is impossible to guide you without just telling you the answer (which we won’t do). I have provided some suggestions above, but I have no idea what you did or did not understand from them, what level you are at, or what you’ve already tried.

It is pretty typical on here for people to share a codepen / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.

Please provide some example of what you’ve tried and I’m sure you’ll get more help.

Happy coding :slight_smile:

5

This is the countdown I had made.https://jsfiddle.net/shobha_patwal/5q9d2ckj/3/

6

you can save the start time in browser cache or on a database

7

How to do it through browser?

8
9

I cannot understand this API method…

10 
localStorage.foo = "some value in a string"

Then

// this will get the value of foo from local storage
localStorage.foo

That’s literally it. You probably want to check the value is actually there before you retrieve it, and the value has to be a string

11