测量用户在网站访问期间花费的时间

Question

我正在尝试使用 PHP 和 Javascript 以及 MAMP 在本地构建一个网站。

我正在寻找的是在网站的每个页面上放置一个计时器，该计时器计算用户在整个网站上花费的时间。即使用户在页面之间切换，计时器仍将继续。我找到的解决方案只显示在每个页面上花费的时间，当我再次重新加载同一页面时，计时器从零重新启动。

这是我所做的计时器的 Javascript：

window.onload=function(){
 time=0;
}
window.onbeforeunload=function(){
 timeSite = new Date()-time;
 window.localStorage['timeSite']=timeSite;
}

我到处寻找解决方案，但没有运气，如果有人知道如何做到这一点，请告诉我。

Answer 1

这是一个工作示例。当用户关闭窗口/选项卡时，它将停止计数。

var timer;
var timerStart;
var timeSpentOnSite = getTimeSpentOnSite();

function getTimeSpentOnSite(){
    timeSpentOnSite = parseInt(localStorage.getItem('timeSpentOnSite'));
    timeSpentOnSite = isNaN(timeSpentOnSite) ? 0 : timeSpentOnSite;
    return timeSpentOnSite;
}

function startCounting(){
    timerStart = Date.now();
    timer = setInterval(function(){
        timeSpentOnSite = getTimeSpentOnSite()+(Date.now()-timerStart);
        localStorage.setItem('timeSpentOnSite',timeSpentOnSite);
        timerStart = parseInt(Date.now());
        // Convert to seconds
        console.log(parseInt(timeSpentOnSite/1000));
    },1000);
}
startCounting();

如果要在窗口/选项卡处于非活动状态时停止计时器，请添加以下代码：

var stopCountingWhenWindowIsInactive = true; 

if( stopCountingWhenWindowIsInactive ){

    if( typeof document.hidden !== "undefined" ){
        var hidden = "hidden", 
        visibilityChange = "visibilitychange", 
        visibilityState = "visibilityState";
    }else if ( typeof document.msHidden !== "undefined" ){
        var hidden = "msHidden", 
        visibilityChange = "msvisibilitychange", 
        visibilityState = "msVisibilityState";
    }
    var documentIsHidden = document[hidden];

    document.addEventListener(visibilityChange, function() {
        if(documentIsHidden != document[hidden]) {
            if( document[hidden] ){
                // Window is inactive
                clearInterval(timer);
            }else{
                // Window is active
                startCounting();
            }
            documentIsHidden = document[hidden];
        }
    });
}

JSFiddle