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

news/2024/10/17 18:39:51/

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

<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">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>

后端接收文件

if($_SERVER['REQUEST_METHOD']==='POST')
{$data=file_get_contents('php://input');$result=json_decode($data);echo $result->timerDisplay;
}

http://www.ppmy.cn/news/1539773.html

相关文章

面试经典150题刷题记录

数组部分 1. 合并两个有序的子数组 —— 倒序双指针避免覆盖 88. 合并两个有序数组 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff0c;使…

高级算法设计与分析 学习笔记14 FFT

​ 本章我们研究多项式乘法。 我们直接乘&#xff0c;时间复杂度是n^2。使用FFT则可以变成nlgn ​编辑 可以看到两个n的多项式&#xff0c;我们直接乘&#xff0c;每种组合都要试一遍&#xff0c;就会要是n^2遍 ​编辑 那么要怎么加速呢&#xff1f; ​编辑 首先多项式可…

数据结构——八大排序(下)

数据结构中的八大排序算法是计算机科学领域经典的排序方法&#xff0c;它们各自具有不同的特点和适用场景。以下是这八大排序算法的详细介绍&#xff1a; 五、选择排序&#xff08;Selection Sort&#xff09; 核心思想&#xff1a;每一轮从未排序的元素中选择最小&#xff0…

SparkSQL介绍及使用

文章目录 1. SparkSQL介绍及使用1.1 SparkSQL介绍1.2 数据结构的形式1.3 Spark SQL 特点1.4 Spark SQL 和 Hive SQL关系 1. SparkSQL介绍及使用 1.1 SparkSQL介绍 Spark SQL是Apache Spark 用于处理结构化数据&#xff08;DataFrame和Datasets&#xff09;的模块。 在Spark1.0…

二叉树最小深度(递归)

111. 二叉树的最小深度 - 力扣&#xff08;LeetCode&#xff09; 给定一个二叉树&#xff0c;找出其最小深度。 最小深度是从根节点到最近叶子节点的最短路径上的节点数量。 说明&#xff1a;叶子节点是指没有子节点的节点。 示例 1&#xff1a; 输入&#xff1a;root [3,…

微信小程序 - 供应链系统设计

文章目录 一、系统概述二、系统架构设计三、系统安全设计四、系统性能优化五、系统部署与维护 在当今数字化时代&#xff0c;供应链管理对于企业的高效运营至关重要。微信小程序作为一种便捷的移动应用形式&#xff0c;为供应链系统的开发提供了新的机遇。本文将从系统架构设计…

Embedding实现GPT回答和知识库内容相关的内容

现在的gpt应用基本都实现了这个场景的应用&#xff0c;比如&#xff1a; 联网搜索&#xff0c;根据网上找到的内容来回答你的内容&#xff0c;像bing和kimi或者其他AI搜索引擎智能客服&#xff0c;把网站里的内容或者相关的其他什么资料预置到系统中&#xff0c;提高回答的质量…

扫雷(C 语言)

目录 一、游戏设计分析二、各个步骤的代码实现1. 游戏菜单界面的实现2. 游戏初始化3. 开始扫雷 三、完整代码四、总结 一、游戏设计分析 本次设计的扫雷游戏是展示一个 9 * 9 的棋盘&#xff0c;然后输入坐标进行判断&#xff0c;若是雷&#xff0c;则游戏结束&#xff0c;否则…