实现Timer,处理Refresh?

时间:2018-05-23 22:06:19

标签: javascript angular typescript

我写了一个能跟踪时间的组件。我目前正在使用Localstorage保存currentTime以防用户点击刷新。但是,我发现这个解决方案并不是一个非常好的解决方案,因为用户可以编辑localstorage。另一方面,我可以使用数据库来存储这些信息,但它会减慢我不想要的页面。

除了使用LocalStorage来存储我的时间之外,还有其他替代解决方案吗?我不希望用户编辑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" );
        }
    }
}

1 个答案:

答案 0 :(得分:0)

可能的替代方法可能是节省用户在服务器端的会话中访问页面的时间。会话存储在服务器内存中并绑定到登录,并且可以在服务器上保存信息以使其安全。一旦用户注销,信息就会被丢弃,因此它比数据库更有效。

This SO question有一个PHP示例,说明如何在会话中存储内容。巧妙的是,它们显示了如何在页面之间记住会话,因此您将始终可以访问currentTime。

Another good SO link