js 统计用户停留网站时长

统计用户停留网站时长

统计用户时长的意义和一些思路说明

应用场景可以是统计手机App使用时长、统计用户打开网站后多久会关闭,这都是属于大数据的范畴。

由此可以拓展到用户使用每个页面的浏览时长,统计每个页面浏览时长可以更好的统计哪些页面是用户经常浏览,

从而更好的优化这些页面,而浏览量比较少的或者没有浏览量的页面应该重新设计或者花更少时间去维护。

而在前端方面存储这些数据的实现思路总体是差不多的。

当然上面的方法也有一定的缺点,比如数据可能会丢失、每个打开的页面都要启动一个定时器等等。

如果需要数据更精准些,我们可以使用websocket或者启动一个定时器定时向后台传数据等等,这样会也有一点的缺点,比如增大服务器压力,影响性能。

具体实现方式

js 复制代码
// 进入页面 - load
window.addEventListener("load",function(){
    let nowTime = getNowTime()
    let openPageCount = localStorage.getItem("openPageCount")
    openPageCount = openPageCount ? parseInt(openPageCount) : 0
    openPageCount += 1
    localStorage.setItem("openPageCount",openPageCount)
    // 用户意外关掉电脑或者突然断电了,这时候是不会执行beforeunload是不会执行
    refreshTime()
    let isRightTime =  compareRefreshTime()
    //其实说明是页面是刷新后加载的,不需要统计开始时间
    if(sessionStorage.getItem("flag") && isRightTime){
        return;
    }
    localStorage.setItem("startTime",nowTime)
    localStorage.setItem("refreshTime",nowTime)
    sessionStorage.setItem("flag", true);
})

// 浏览器关闭 - beforeunload
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
}
// 可以往localStorage里存一个刷新时间,每30秒更新这个刷新时间
// 用户加载网站时,读取这个刷新时间,如果当前时间和这个刷新时间相差大于1分钟,说明数据有断层,此时应该抛弃这一条记录数据
function refreshTime(){
    // 避免意外关机导致数据统计丢失问题
    setTimeout(refreshTime ,30 * 1000)
    let nowTime = getNowTime()
    localStorage.setItem("refreshTime",nowTime)
}

其实这种直接在后台java统计也是可以的,以上只是js的实现方式。

相关推荐
wheeldown6 分钟前
【Linux】Linux 进程通信:System V 共享内存(最快方案)C++ 封装实战 + 通信案例,4 类经典 Bug 快速修复
linux·运维·服务器·开发语言
小年糕是糕手16 分钟前
【数据结构】双向链表“0”基础知识讲解 + 实战演练
c语言·开发语言·数据结构·c++·学习·算法·链表
将车24422 分钟前
C++实现二叉树搜索树
开发语言·数据结构·c++·笔记·学习
梵得儿SHI37 分钟前
Java 反射机制核心类详解:Class、Constructor、Method、Field
java·开发语言·反射·class·constructor·java反射·java反射机制
kevlin_coder1 小时前
🚀 实现同一个滚动区域包含多个虚拟滚动列表
前端·javascript
金梦人生1 小时前
JS 性能优化
前端·javascript
peachSoda71 小时前
自定义配置小程序tabbar逻辑思路
javascript·vue.js·微信小程序·小程序
hbqjzx1 小时前
记录一个自动学习的脚本开发过程
开发语言·javascript·学习
浪裡遊1 小时前
React开发模式解析:JSX语法与生命周期管理
前端·javascript·react.js·前端框架·ecmascript
fruge1 小时前
Vue 3 完全指南:响应式原理、组合式 API 与实战优化
javascript·vue.js·ecmascript