利用sessionStorage收集用户访问信息,然后传递给后端

这里只是简单的收集用户的停留时间、页面加载时间、当前页面URL及来源页面,以做示例

html 复制代码
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>测试sessionStorage存储用户访问信息</title>
    </head>
    <body>
        <button id="timer">停止</button>
        <script type="text/javascript">
        //日期+时间函数
            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);
            });

            
            
        </script>
    </body>
</html>

后端接收文件

php 复制代码
if($_SERVER['REQUEST_METHOD']==='POST')
{
    $data=file_get_contents('php://input');
    $result=json_decode($data);
    echo $result->timerDisplay;
}
相关推荐
F-2H1 小时前
C语言:指针4(常量指针和指针常量及动态内存分配)
java·linux·c语言·开发语言·前端·c++
gqkmiss1 小时前
Chrome 浏览器插件获取网页 iframe 中的 window 对象
前端·chrome·iframe·postmessage·chrome 插件
m0_748247554 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255024 小时前
前端常用算法集合
前端·算法
真的很上进4 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203984 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2345 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1235 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~6 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语6 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js