使用会话存储（sessionStorage）收集用户访问信息并将其传递给后端

最编程 2024-10-13 10:37:23

...

//日期+时间函数 function formatDate(){ let date=new Date(); let Y=date.getFullYear()+'-'; let M=date.getMonth()+1 < 10 ? '0'+date.getMonth()+1 : date.getMonth()+1+'-'; let D=date.getDate() < 10 ? '0'+date.getDate()+' ' : date.getDate()+' '; let h=date.getHours() <10 ? '0'+date.getHours()+':':date.getHours()+':'; let m=date.getMinutes()<10 ? '0'+date.getMinutes()+":":date.getMinutes()+":"; let s=date.getSeconds()<10 ? '0'+date.getSeconds() : date.getSeconds(); return Y+M+D+h+m+s; } //停留时间变量 let timer=null, startTime=new Date().valueOf();//开始时间 //页面加载完成后，收集用户信息 document.addEventListener('DOMContentLoaded',function(){ sessionStorage.setItem('visitedPage',window.location.href);//当前页面 sessionStorage.setItem('referrer',document.referrer);//访问来源 sessionStorage.setItem('visitTime',formatDate());//访问的日期和时间 //计时变量 let seconds=0; timer=setInterval(function(){ seconds++; sessionStorage.setItem('timerDisplay',seconds);//停留时间，每秒种seconds增加1 },1000); }); //这里是以点击按钮，然后把数据传递给后端； //现实生成过程过应该是以用户关闭页面；然后把收集数据传递给后端，用unload事件完成 const btn=document.getElementById('timer'); btn.addEventListener('click',function(){ console.log(sessionStorage.getItem('timerDisplay')); console.log(sessionStorage.getItem('visitTime')); //取消停留时间变量 clearInterval(timer); //将收集所有数据，存储进frondEndData对象中 let v=sessionStorage.getItem('visitTime'); let r=sessionStorage.getItem('referrer'); let l=sessionStorage.getItem('loadTime'); let d=sessionStorage.getItem('timerDisplay'); const frontEndData={ visitTime:v, referrer:r, loadTime:l, timerDisplay:d }; //转换为json格式 const frontData=JSON.stringify(frontEndData); const jsonHeaders=new Headers({ 'Content-Type':'application/json' }); //利用fetch传递给后端 fetch('sessionStorage.php',{ method:'post', body:frontData, headers:jsonHeaders }) .then((response)=>{ if(response.ok && response.status===200) { return response.text(); } throw new Error('返回数据有误'); }) //后端返回的信息 .then((data)=>{ /* let result=JSON.stringify(data); let res=JSON.parse(result); console.log(res.msg); */ console.log(data); }) .catch(e=>{ console.log('连接服务器发生错误',e); }) //将停留计时器删除 sessionStorage.removeItem('timerDisplay'); }); //这里是加载完成各类要素如：CSS、图片、javascript等 //计算加载页面共用时间；也可以用performance API里面的navigation来计算页面加载时间更精确，可以达到毫秒级 window.addEventListener('load',function(){ let endTime=new Date().valueOf(); let loadTime=endTime-startTime; sessionStorage.setItem('loadTime',loadTime); });

上一篇：在本地部署 Milvus-1。在 Docker 中安装 Milvus

下一篇： [vue3] 实现 el-tree 组件，将不同级别的箭头修改为自定义图标