How to reset timer after page reload/open new window with startValues.

[klochko7]

How to reset timer after page reload/open new window with startValues.

[albert-gonzalez]

Hi!

You can do this by saving the values in local storage, for example. Something like this:

const Timer = easytimer.Timer;
const savedTime = JSON.parse(localStorage.getItem('time') || '{}');

document.querySelector('.saved').textContent = localStorage.getItem('time');
const instance = new Timer({ startValues: savedTime });
instance.addEventListener('secondsUpdated', () => {
   document.querySelector('.example').textContent = instance.getTimeValues().toString();
   localStorage.setItem('time', JSON.stringify(instance.getTimeValues()));
});
instance.start();

Here you have a working example: https://playcode.io/906963

Best regards!

[klochko7]

albert-gonzalez, hi! Thanks a lot.

[klochko7]

albert-gonzalez, thank you very for your explanation. It works.
But I have some other problems.. in my keys I need to have ability to reset timer to zero when I click button stop and then no start timer automatically ... only if click start button again.
I tried to do this.. by time dose not reset.

   localStorage.removeItem('time');
  or
   localStorage.setItem('time', JSON.stringify(0));

Is it possible to save configuration after page reload ? For example if it stop/pause/play before reload ... it continue stay pause or stay stop after reload.

[albert-gonzalez]

Hi again!

Glad to help :)

You can check if the localStorage item is set when the page is reloading to start automatically the timer or not. For example:

const Timer = easytimer.Timer;
const savedTime = JSON.parse(localStorage.getItem('time'));

document.querySelector('.saved').textContent = localStorage.getItem('time');
const instance = new Timer();
instance.addEventListener('secondsUpdated', () => {
   document.querySelector('.example').textContent = instance.getTimeValues().toString();
   localStorage.setItem('time', JSON.stringify(instance.getTimeValues()));
});

instance.addEventListener('stopped', () => {
  localStorage.removeItem('time');
  document.querySelector('.saved').textContent = '';
  document.querySelector('.example').textContent = '';
});

document.querySelector('.start-button').addEventListener('click', () => instance.start());
document.querySelector('.stop-button').addEventListener('click', () => { 
  instance.stop();
});

if (savedTime) {
  instance.start({ startValues: savedTime });
}

I updated the example with this code. Check it out: https://playcode.io/906963

Best regards!

[klochko7]

Hi again! Thank you very much! Is it possible to save configuration before page reload ? For example if it stop/pause/play before reload ... it continue stay pause or stay stop after reload page. Leave exactly the same state as it was before reloading the page.

[albert-gonzalez]

Yes, you can save your state using the different listeners of the timer (started, paused, stopped) to save your state when the state of the timer changes. Another way to do it is to listen to the event beforeUnload which runs when the window is about to close or refresh (more info and examples here: https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event).

[klochko7]

albert-gonzalez, thanks a lot. I can do something like this ?

           $('.timerDetails .pauseButton').click(function () {
                instance.pause();
                localStorage.setItem('pause',  true);
                $(".pauseButton").parent().children().removeClass("active");
                $(".pauseButton").addClass("active");
            });

            $('.timerDetails .stopButton').click(function () {
                instance.pause();
                localStorage.setItem('pause',  true);
                $(".stopButton").parent().children().removeClass("active");
                $(".stopButton").addClass("active");
            });

            if (localStorage.getItem("pause")) {
            
            instance.start();
            instance.pause();
            
            }

[albert-gonzalez]

Yes, you can do it like this too. Be careful with localStorage, because it only saves strings and localStorage.getItem("pause") will always evaluate to true. You can do localStorage.getItem("pause") === 'true' to prevent this.

Best regards!

[klochko7]

albert-gonzalez, thanks a lot. I will try ;)

[klochko7]

Could you please show some example how you save leave exactly the same state as it was before reloading the page. For example if pause was run.

[albert-gonzalez]

Sure, I think thats solve the problem pretty well:

const Timer = easytimer.Timer;


const getSavedTime = () => JSON.parse(localStorage.getItem('time')) || {};

const instance = new Timer({ startValues: getSavedTime() });
instance.addEventListener('secondsUpdated', () => {
   document.querySelector('.example').textContent = instance.getTimeValues().toString();
   localStorage.setItem('time', JSON.stringify(instance.getTimeValues()));
});

instance.addEventListener('started', () => localStorage.setItem('running', '1'));

instance.addEventListener('paused', () => localStorage.removeItem('running'));

instance.addEventListener('stopped', () => {
  localStorage.removeItem('time');
  localStorage.removeItem('running');
  document.querySelector('.saved').textContent = '';
  document.querySelector('.example').textContent = '';
});

document.querySelector('.saved').textContent = localStorage.getItem('time');
document.querySelector('.example').textContent = instance.getTimeValues().toString();

document.querySelector('.start-button').addEventListener('click', () => instance.start({ startValues: getSavedTime() }));
document.querySelector('.pause-button').addEventListener('click', () => instance.pause());
document.querySelector('.stop-button').addEventListener('click', () => instance.stop());

if (localStorage.getItem('running') === '1') {
  instance.start({ startValues: getSavedTime() });
}

Example: https://playcode.io/906963

Best regards!

[klochko7]

albert-gonzalez , everything is working as I looking for! Thanks a lot!

[klochko7]

But only small issue I found after using timer many times in different scenarios (play,stop,pause,reload page) several events 'secondsUpdated' can running simultaneously and time is not displayed clearly. Is it possible to prevent such bug?

[albert-gonzalez]

Hi again!

I don't know if I understand your question properly, but I give you two possible solutions:

• localStorage is shared between all the tabs of the same domain, and if your app can run in multiple tabs this will be an issue. You can use sessionStorage instead, it has the same API but only saves the data to the tab where it is executed, and this data will be removed when the tab is closed.
• If you are using multiple timers on the page, you can use a different item in the sessionStorage for each timer. If you are using only a single timer, be sure to create a single instance of the timer (new Timer() is executed only once on the page).

I hope it helps.

Best regards!

[klochko7]

Hi ! Yes, I am sharing my timer between all pages at my app. It is app requirements to have working timer on all pages.
Now I am using only a single timer. If there's a way to stop/pause timer on all pages (new windows) simultaneously ? For example I have 2 tabs page 1 and page 2... on both pages I have running the same timer ... if I click pause timer on page 1 ... it pause on page 2 too. I think it is logically because running the same instance.

[albert-gonzalez]

Well, the library is meant to run in a single tab, because it is how javascript works, and it does not communicate with other tabs/windows. Maybe using localStorage or a server you can achieve what you want, but it's not a simple task! I think that I can't help you further with this problem.

Best regards!

[klochko7]

albert-gonzalez,thanks a lot. Understand.

[klochko7]

albert-gonzalez, hi! Could you help please ... Is it possible to work longer than 24 hours ? After 23:59:59 hours it reset and counts again. I would like not reset timer until a person resets time on their own.

[albert-gonzalez]

Hi!

Yes, you can do that. You can use the days counter, or if you want to use hours you can combine getTimeValues() with getTotalTimeValues(). The lib does not include any method for this, but you can write some helper functions to do it. A little example:

const Timer = require("easytimer.js").Timer;

const instance = new Timer({ startValues: { days: 1 }, target: { days: 1, seconds: 5}});
instance.addEventListener('secondsUpdated', () => {
    console.log(timerToString(instance));
});

const timerToString = (timer) => {
    const hours = timer.getTotalTimeValues().hours;
    const {minutes, seconds} = timer.getTimeValues();
    
    return `${lpad0(hours, 1)}:${lpad0(minutes)}:${lpad0(seconds)}`;
}

const lpad0 = (number) => `${number}`.padStart(2, '0');
instance.start();

Here you have a working example: https://runkit.com/albert-gonzalez/62b0997563f8820008b5b856

Best regards!

[klochko7]

albert-gonzalez, hi. Thank you very much. It looks very good. I will try.

[klochko7]

albert-gonzalez. How to use timerToString function with your code above when page reload ? https://playcode.io/906963

[albert-gonzalez]

Sorry, I had not read your message until now.

I have updated the example using the timerToString function. https://playcode.io/906963

Best regards!