我正在尝试使用PHP和Javascript以及MAMP在本地构建网站。
我想要的是在网站的每个页面上放置一个计时器，该计时器会计算用户在整个网站中花费的时间。即使用户在页面之间切换，计时器仍将继续计时。我找到的解决方案只显示了在每个页面上花费的时间，并且当我重新加载同一页面时，计时器从零重新开始。
这是我编写的计时器的Javascript代码：
window.onload=function(){
time=0;
}
window.onbeforeunload=function(){
timeSite = new Date()-time;
window.localStorage['timeSite']=timeSite;
}
我已经到处寻找解决方案，但没有成功，如果有人知道如何做，请告诉我。
这里是一个可运行的示例。当用户关闭窗口/标签时，它将停止计数。
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];
}
});
}
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']变量，并在每次页面导航时相应地更新。
localStorage和sessionStorage以及一个setInterval可以解决问题。即使有2-3个标签页打开，也可以正确计算用户在网站上花费的时间，但当用户关闭所有标签页并重新打开时，新会话将开始。 - user2560539