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

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

Answer 2

使用

localStorage

可能不是满足您需求的最佳选择。不过

sessionStorage

、

localStorage

最合适。请记住，打开新选项卡时

sessionStorage

会解析为新会话，因此使用

localStorage

与以下事实有关：如果仅使用

sessionStorage

并且用户并行打开新选项卡并访问您的网站将为该浏览器选项卡解析为一个新的单独会话，并从头开始计算

timeOnSite

。在下面的示例中，尝试避免这种情况并计算准确的

timeOnSite

。

sessionStorage

属性允许您访问会话存储 当前原点的对象。

sessionStorage

类似于

Window.localStorage

，唯一的区别是数据存储在

localStorage

没有设置过期时间，存储在

sessionStorage

中的数据获取 当页面会话结束时清除。页面会话持续时间一样长 当浏览器打开并在页面重新加载和恢复时继续存在。 在新选项卡或窗口中打开页面将导致新会话 启动，这与会话 cookie 的工作方式不同。

function myTimer() {
if(!sessionStorage.getItem('firstVisitTime')) {
   var myDate = Date.now();
   if(!localStorage.getItem('timeOnSite')) {
   sessionStorage.setItem('firstVisitTime',myDate);
   } else {
   if(localStorage.getItem('tabsCount') && parseInt(localStorage.getItem('tabsCount'))>1){
   sessionStorage.setItem('firstVisitTime',myDate-parseInt(localStorage.getItem('timeOnSite'))); 
   } else {
   sessionStorage.setItem('firstVisitTime',myDate);
   } 
}
}
var myInterval = setInterval(function(){  
   var time = Date.now()-parseInt(sessionStorage.getItem('firstVisitTime'));
   localStorage.setItem('timeOnSite',time); 
   document.getElementById("output").innerHTML = (time/1000)+' seconds have passed since first visit';
}, 1000);
return myInterval;
}    
window.onbeforeunload=function() {
console.log('Document onbeforeunload state.');
clearInterval(timer);
};
window.onunload=function() {
var time = Date.now();
localStorage.setItem('timeLeftSite',time);
localStorage.setItem("tabsCount",parseInt(localStorage.getItem("tabsCount"))-1);
console.log('Document onunload state.');
};
if (document.readyState == "complete") {
if(localStorage.getItem("tabsCount")){
localStorage.setItem("tabsCount",parseInt(localStorage.getItem("tabsCount"))+1);
var timer = myTimer();
} else {
localStorage.setItem("tabsCount",1);
}
   console.log("Document complete state.");
}

工作小提琴

如果您想要服务器端解决方案，请设置一个

$_SESSION['timeOnSite']

变量并在每个页面导航上进行相应更新。

Answer 3

拜托，我是一个新手，我喜欢用 HTML 在我的网页上设置类似的东西。 我希望每个页面访问独立计数，即如果您刷新页面，它会重新启动时间计数器。 请帮忙！