上面说的还有一个问题,就是如何统计用户打开了多个标签页呢?在本地缓存中,localStorage中的数据是整个网站都可以共享的,也就是具有相同域名、ip的网站,localStorage里的数据在不同标签页中也是相同的。
这时候可以往localStorage里存一个计数器,当用户进入页面时,计数器加1,当用户离开页面时计数器减1。当计数器为0时,标志页面全部关闭,此时可以记录页面关闭的结束时间。同时访问网站的开始时间也存到localStorage中。
- 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是不会执行,此时这个数据是不正确,是应该抛弃的。
% k9 a" d& }. R1 w% R
要解决这个问题,可以往localStorage里存一个刷新时间,每30秒更新这个刷新时间,用户加载网站时,读取这个刷新时间,如果当前时间和这个刷新时间相差大于1分钟,说明数据有断层,此时应该抛弃这一条记录数据。
/ @( E; u2 l8 q+ {4 e# P; f, G- window.addEventListener("load",function(){
- let nowTime = getNowTime()
- let openPageCount = localStorage.getItem("openPageCount")
- openPageCount = openPageCount ? parseInt(openPageCount) : 0
- openPageCount += 1
- localStorage.setItem("openPageCount",openPageCount)
- refreshTime()
- let isRightTime = compareRefreshTime()
- //其实说明是页面是刷新后加载的,不需要统计开始时间
- if(sessionStorage.getItem("flag") && isRightTime){
- return;
- }
- localStorage.setItem("startTime",nowTime)
- localStorage.setItem("refreshTime",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
- }
-
- function compareRefreshTime(){
- let nowTime = getNowTime()
- let refreshTime = localStorage.getItem("refreshTime")
- return nowTime - refreshTime < 60 * 1000
- }
-
- function refreshTime(){
- setTimeout(refreshTime ,30 * 1000)
- let nowTime = getNowTime()
- localStorage.setItem("refreshTime",nowTime)
- }
应用场景可以是统计手机App使用时长、统计用户打开网站后多久会关闭,这都是属于大数据的范畴。
& ?+ s# b5 K! a0 E! }+ G4 p
由此可以拓展到用户使用每个页面的浏览时长,统计每个页面浏览时长可以更好的统计哪些页面是用户经常浏览,从而更好的优化这些页面,而浏览量比较少的或者没有浏览量的页面应该重新设计或者花更少时间去维护。而在前端方面存储这些数据的实现思路总体是差不多的。
0 G2 W& u' g( u3 K4 U* L
当然上面的方法也有一定的缺点,比如数据可能会丢失、每个打开的页面都要启动一个定时器等等。
3 A4 v2 }/ M5 X 如果需要数据更精准些,我们可以使用websocket或者启动一个定时器定时向后台传数据等等,这样会也有一点的缺点,比如增大服务器压力,影响性能。