首先,进入页面的时候,浏览器会调用onload事件,浏览器关闭时,浏览器会调用beforeunload事件,可以从这两个事件入手。但是这里有几个问题,那就是浏览器刷新的时候,也会调用beforeunload,还有就是如何知道用户在其它标签页也打开了网页呢?有什么可以记录浏览器是否刷新呢?这时候便想到了sessionStorage。 ! Q* n; S. l8 t3 I sessionStorage,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。也就是说数据存储在sessionStorage中,在当前标签页会一直存在。' c# Z2 U9 G8 O, e+ r8 _+ v
首先在初次进入页面时在onload事件中往sessionStorage存入一个标识! W$ y: P" p5 Y. i% ? q
window.addEventListener("load",function(){
let nowTime = getNowTime()
let openPageCount = localStorage.getItem("openPageCount")
openPageCount += 1
localStorage.setItem("openPageCount",openPageCount)
//其实说明是页面是刷新后加载的,不应该统计开始时间
if(sessionStorage.getItem("flag")){
return;
}
localStorage.setItem("startTime",nowTime)
sessionStorage.setItem("flag", true);
})
window.addEventListener("beforeunload",function(){
let nowTime = getNowTime()
let openPageCount = localStorage.getItem("openPageCount")
openPageCount -= 1
localStorage.setItem("endTime",nowTime)
localStorage.setItem("openPageCount",openPageCount)
if(openPageCount == 0){
//说明页面全部关闭,这时候可以传数据给后台
}
})
function getNowTime(){
let nowTime = new Date().getTime()
return nowTime
}
这里还有个问题,就是用户意外关掉电脑或者突然断电了,这时候是不会执行beforeunload是不会执行,此时这个数据是不正确,是应该抛弃的。 - `0 J! G) x$ \ 要解决这个问题,可以往localStorage里存一个刷新时间,每30秒更新这个刷新时间,用户加载网站时,读取这个刷新时间,如果当前时间和这个刷新时间相差大于1分钟,说明数据有断层,此时应该抛弃这一条记录数据。' b0 K m; N, K3 j& B# U