Implementing Timer, handling on Refresh?

Question

I have written a component that will keep track of time. I am currently using Localstorage to save the currentTime just in case a user hits Refresh. However, I found that this solution is not a really good one becasue the user can edit localstorage. On the other hand, I can use the database to store this information, but it will slow down my page which I do not want.

Is there any alternative solution beside using LocalStorage to store my time? I do not want user to edit the localstorage.

export class MainComponent implements OnInit {

    private start: number = null;
    private uiTimerId: number = null;

    constructor() {
    }

    private updateUI(): void {

        let delta = performance.now() - this.start;
        this.someUIElement.textContent = delta.toFixed() + "ms";
    }

    ngOnInit() {

        this.start = parseFloat( window.localStorage.getItem( "timerStart" ) );
        if( !this.start ) {
            this.start = performance.now();
            window.localStorage.setItem( "timerStart", this.start );
        }

        this.uiTimerId = window.setInterval( this.updateUI.bind(this), 100 ); // 100ms UI updates, not 1000ms to reduce UI jitter
    }

    buttonClick = function() {
        if( this.uiTimerId != null ) {
            window.clearInterval( this.uiTimerId );
            window.localStorage.removeItem( "timerStart" );
        }
    }
}

Asking if theres other solution beside using Database to store it. For efficiency purpose. — Emenpy, May 23 '18 at 22:32
From the database possibility, I assume you have to login to use this service. Does the currentTime need to be retained between different logins or can it be discarded once you log out? — NocNit, May 23 '18 at 22:40
@Emenpy Either keep it in a service, or learn how to use a redux like store https://github.com/ngrx/store ... I dont see why a simple service wont do :p — Lucas, May 23 '18 at 23:04
@FRECIA Even if it's in service, a refresh will start the timer over. — Emenpy, May 23 '18 at 23:55
@NocNit I am using a timer to measure how long a user stay in a certain page. Once log out/log back in, the timer is reset. However, i do not want it to reset when a user refresh a page. By storing in localStorage, i can retrieve the time from localstorage if it was reset. — Emenpy, May 23 '18 at 23:56
@Emenpy Just a follow up, did our comments/answer help you solve your question? — NocNit, May 27 '18 at 08:31

NocNit · Answer 1 · 2018-05-24T00:09:36.580

A possible alternative might be to save the time the user accessed the page in the session on the server side. A session is stored in server memory and tied to a login, and can hold information on the server which makes it secure. Once the user logs out, the information is discarded, so it's more efficient than a database.

This SO question has a PHP example of how to store something in the session. The neat thing there is that they show how a session is remembered between pages, so you will always have access to currentTime.

Another good SO link

Implementing Timer, handling on Refresh?

1 Answers1