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

这里只是简单的收集用户的停留时间、页面加载时间、当前页面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">//日期+时间函数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.mzph.cn/news/882071.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于深度学习的设备异常检测与预测性维护

基于深度学习的设备异常检测与预测性维护是一项利用深度学习技术分析设备运行数据&#xff0c;实时检测设备运行过程中的异常情况&#xff0c;并预测未来可能的故障&#xff0c;以便提前进行维护&#xff0c;防止意外停机和生产中断。它在工业领域应用广泛&#xff0c;特别是在…

使用docker搭建lnmp运行WordPress

一&#xff0c;部署目的 使用 Docker 技术在单机上部署 LNMP 服务&#xff08;Linux Nginx MySQL PHP&#xff09;。部署并运行 WordPress 网站平台。掌握 Docker 容器间的互联及数据卷共享。 二&#xff0c;部署环境 操作系统&#xff1a;CentOS 7Docker 版本&#xff1…

路由通信 的 VLAN技术

一、VLAN基础 虚拟局域网&#xff08;Virtual Local Area Network&#xff0c;VLAN&#xff09; 根据管理功能、组织机构或应用类型对交换局域网进行分段而形成的逻辑网络。 交换机最多支持4094个VLAN&#xff0c;其中默认管理VLAN是VLAN1&#xff0c;不能创建&#xff0c;也…

spark:数据的关联与合并、缓存和checkpoint

文章目录 1. 数据的关联与合并1.1 join关联1.1.1 内关联1.1.2 左关联1.1.3 右关联 1.2 Union合并 2. 缓存和checkpoint 1. 数据的关联与合并 1.1 join关联 students表数据&#xff1a; 1.1.1 内关联 内关联只返回两个 DataFrame 中在连接键上匹配的行。 # join 关联 from…

面试感受(续)

保险销售篇 昨天经朋友介绍了解可以到他那&#xff08;保险&#xff09;去试试&#xff0c;今上午过去了&#xff0c;不得不说保险行业确实有钱哈&#xff0c;那办公室贼大&#xff0c;装修贼气派&#xff0c;不过现在保险行业的变种名称这么多的吗&#xff0c;大健康规划师&a…

Python入门:轻松学会Python的*args和**kwargs

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 Python传参 📒📝 *args📝 **kwargs📝 综合使用 *args 和 **kwargs📝 注意事项⚓️ 相关链接 ⚓️📖 介绍 📖 在你编写Python代码时,是否曾遇到过需要处理数量不定的参数的情况?许多刚Python入门的新手在面对这种…

VLAN概述

1.VLAN的概念 VLAN&#xff08;Virtual Local Area Network&#xff0c;虚拟局域网&#xff09;是一种将物理网络划分成多个逻辑网络的技术。 2.VLAN的作用和好处 2.1作用 划分广播域&#xff0c;控制广播消息传递范围 2.2好处 控制广播 增强网络安全性 简化网络管理 3.…

C# DotNetty客户端,包含心跳发送,断线重连机制

1.新建MessageBean消息类型类&#xff0c;也可以不用&#xff0c;看自己需要 public enum MsgType { STATUS_CONNECT_ERROR, STATUS_CONNECT_SUCCESS, STATUS_CONNECT_CLOSED, STATUC_CONNECT_RECONNECT }public class MessageBean {/*** 消息类型*/private MsgType type;/***…

c# gobal using

在 C# 10 及以上版本中&#xff0c;引入了 全局 using&#xff08;Global using&#xff09;特性&#xff0c;这允许开发者在项目级别声明 using 命名空间&#xff0c;从而简化代码的书写和维护。全局 using 的主要作用是提高代码的可读性和减少重复声明。 全局 using 的基本概…

visio导出pdf公式变形问题杂谈

其实不会变形。 我自己的情况是直接用edge PDF阅读器打开pdf看到的是公式有变形&#xff08;常见是字体、形状变了&#xff09;&#xff0c;但换一个pdf阅读器如adobe的就是正常的了 不过大家一般是用edge pdf阅读器直接打开查看&#xff0c;所以通过visio打印的方式导出pdf可…

若依框架中spring security的完整认证流程,及其如何使用自定义用户表进行登录认证,学会轻松实现二开,嘎嘎赚块乾

1&#xff09;熟悉之前的SysUser登录流程 过滤器链验证配置 这里security过滤器链增加了前置过滤器链jwtFilter 该过滤器为我们自定义的&#xff0c;每次请求都会经过jwt验证 ok我们按ctrl alt B跳转过去来看下 首先会获取登录用户LoginUser 内部通过header键&#xff0c;获…

第十二章 RabbitMQ之失败消息处理策略

目录 一、引言 二、RepublishMessageRecoverer 实现 2.1. 实现步骤 2.2. 实现代码 2.2.1. 异常交换机队列回收期配置类 2.2.2. 常规交换机队列配置类 2.2.3. 消费者代码 2.2.4. 消费者yml配置 2.2.5. 生产者代码 2.2.6. 生产者yml配置 2.2.7. 运行效果 一、引言 …

Codeforces Round 883 (Div. 3) G. Rudolf and CodeVid-23(Dijkstra最短路)

题目链接 Codeforces Round 883 (Div. 3) G. Rudolf and CodeVid-23 思路 因为 n n n最大值为 10 10 10&#xff0c;且只有 01 01 01两种状态&#xff0c;当作二进制数转化为十进制数后最多只有 1024 1024 1024种。 因为 m m m的最大值为 1 e 3 1e3 1e3&#xff0c;因此我们…

重新定义自动驾驶的动态视觉?谷歌提出几何优先的动态场景方法MonST3R

导读&#xff1a; 本文引入了Motion DUSt3R (MonST3R)&#xff0c;这是一种几何优先的动态场景方法&#xff0c;它以点图的形式直接估计几何形状。相比以前的工作&#xff0c;MonST3R具有如下关键优势&#xff1a; 增强的稳健性&#xff0c;特别是在具有挑战性的场景中&#xf…

unity动态批处理

unity动态批处理 动态批处理要求和兼容性渲染管线兼容性 使用动态批处理网格的动态批处理限制动态生成几何体的动态批处理 动态批处理 动态批处理是一种绘制调用批处理方法&#xff0c;用于批处理移动的 GameObjects 以减少绘制调用。动态批处理在处理网格和 Unity 在运行时动…

【系统架构设计师】案例专题三:数据库系统考点梳理

更多内容请见: 备考系统架构设计师-核心总结目录 摘要:本文主要梳理系统架构设计师 - 数据库系统 案例考点 ,主要包括ORM技术、关系型数据库、内存数据库、NoSQL、规范化、分布式数据库、数据仓库集成等。 文章目录 一、ORM技术二、数据库分类比较三、并发控制四、封锁协议…

【二刷hot-100】day2

目录 1.无重复字符的最长子串 2.找到字符串中所有字母异位词 3.和为 K 的子数组 4.滑动窗口最大值 1.无重复字符的最长子串 class Solution {public int lengthOfLongestSubstring(String s) {Map<Character,Integer> dict new HashMap<>();int ret0;int i-1;for…

Oracle实际需要用到但常常被忽略的函数

1、Oracle中nvl()与nvl2()函数 函数nvl(expression1,expression2)根据参数1是否为null返回参数1或参数2的值&#xff1b; 函数nvl2(expression1,expression2,expression3)根据参数1是否为null返回参数2或参数3的值 【函数格式】&#xff1a;nvl(expression1,expression2) 若…

从一致性哈希算法带来的分布式系统设计思考

引言 在分布式系统中&#xff0c;数据存储和访问的均匀性、高可用性及可扩展性至关重要。一致性哈希算法&#xff08;Consistent Hashing&#xff09;以其优秀的数据分布特性&#xff0c;广泛应用于缓存、负载均衡和数据库分片等领域&#xff0c;有效提升了系统的稳定性和灵活…

快速了解AUTOSAR CP DEM模块作用与实现工作原理

在AUTOSAR&#xff08;Automotive Open System Architecture&#xff09;Classic Platform&#xff08;CP&#xff09;中&#xff0c;DEM&#xff08;Diagnostic Event Manager&#xff09;模块的主要作用是记录和管理ECU&#xff08;Electronic Control Unit&#xff09;内的诊…