当前位置： 首页 > news >正文

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

news 2025/10/1 11:56:20

这里只是简单的收集用户的停留时间、页面加载时间、当前页面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;
}

相关文章：

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

这里只是简单的收集用户的停留时间、页面加载时间、当前页面URL及来源页面&#xff0c;以做示例 <html><head><meta http-equiv"content-type" content"text/html; charsetUTF-8"/><title>测试sessionStorage存储用户访问信息<…...

编程日记 2024/10/14 0:24:27

什么是Qseven？模块电脑（核心板）规范标准简介二

1.概念 Qseven是一种通用的、小尺寸计算机模块标准&#xff0c;适用于需要低功耗、低成本和高性能的应用。 Qseven模块电脑&#xff08;核心板&#xff09;采用230Pin金手指连接器 2.Qseven的起源 Qseven最初是由Congatec、SECO、MSC三家欧洲公司于2008年发起&#xff0c;旨在…...

编程日记 2024/10/14 0:23:26

leetcode数组（三）-有序数组的平方

题目 . - 力扣&#xff08;LeetCode&#xff09; 给你一个按 非递减顺序 排序的整数数组 nums&#xff0c;返回 每个数字的平方 组成的新数组&#xff0c;要求也按 非递减顺序 排序。 例1 输入&#xff1a;nums [-4,-1,0,3,10] 输出&#xff1a;[0,1,9,16,100] 解释&#…...

编程日记 2024/10/14 0:21:24

HCIP-HarmonyOS Application Developer 习题（五）

1、以下哪种原子化布局能力属于自适应变化能力? A. 拉伸 B.占比 C. 隐藏 D.拆行 答案&#xff1a;A 分析&#xff1a;划分为“自适应变化能力”和“自适应布局能力”两类。 其中&#xff0c;自适应变化能力包含了缩放能力和拉伸能力&#xff0c;自适应布局能力包含了隐藏、折…...

编程日记 2024/10/14 0:20:23

【详细教程】如何使用YOLOv11进行图像与视频的目标检测

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…...

编程日记 2024/10/14 0:16:19

H7-TOOL的LUA小程序教程第14期：任意波形信号发生器，0-20mA输出和微型数控电源(2024-10-11，已更新)

LUA脚本的好处是用户可以根据自己注册的一批API&#xff08;当前TOOL已经提供了几百个函数供大家使用&#xff09;&#xff0c;实现各种小程序&#xff0c;不再限制Flash里面已经下载的程序&#xff0c;就跟手机安装APP差不多&#xff0c;所以在H7-TOOL里面被广泛使用&#xff…...

编程日记 2024/10/14 0:13:17

Redis面试篇3

1、Redis的数据类型&#xff0c;以及每种数据类型的使用场景&#xff1f; 常见的几种数据类型和使用场景如下&#xff1a; 字符串(String)&#xff1a;字符串类型是Redis最基本的数据结构&#xff0c;一个键最大能存储512MB。 使用场景&#xff1a;适用于计数器、分布式锁、缓…...

编程日记 2024/10/14 0:11:15

集成方案 | 借助 Microsoft Copilot for Sales 与 Docusign，加速销售流程！

加速协议信息提取&#xff0c;随时优化邮件内容~ 在当今信息爆炸的时代&#xff0c;销售人员掌握着丰富的数据资源。他们能够通过 CRM 平台、电子邮件、合同库以及其他多种记录系统&#xff0c;随时检索特定个人或组织的关键信息。这些数据对于销售沟通至关重要。然而&#x…...

编程日记 2024/10/14 0:10:14

k8s 1.28.2 集群部署 MinIO 分布式集群

文章目录 [toc]MinIO 介绍MinIO 生产硬件要求MinIO 存储要求MinIO 内存要求MinIO 网络要求MinIO 部署架构分布式 MinIO复制的 MinIO 部署 MinIO创建目录节点打标签创建 namespace创建 pv创建 MinIO配置 ingress问题记录通过代理服务器访问 MinIO 的 Object Browser 界面一直显示…...

编程日记 2024/10/14 0:06:09

HAL库常用的函数：

目录 HAL库&#xff1a; 1.GPIO常用函数&#xff1a; 1.HAL_GPIO_ReadPin( ) 2.HAL_GPIO_WritePin( ) 3.HAL_GPIO_TogglePin( ) 4.HAL_GPIO_EXTI_IRQHandler( ) 5.HAL_GPIO_EXTI_Callback( ) 2.UART常用函数&#xff1a; 1.HAL_U…...

编程日记 2024/10/14 0:05:08

如何捕捉行情爆发的前兆

在金融市场的激烈角逐中&#xff0c;每一次行情的爆发都是投资者获取丰厚回报的关键时刻。然而&#xff0c;如何识别并把握这些时刻&#xff0c;却是一门需要深厚金融专业知识和敏锐洞察力的艺术。今天&#xff0c;我们就来深入探讨行情爆发的初期信号&#xff0c;揭示那些能够…...

编程日记 2024/10/14 0:03:06

【万字长文】Word2Vec计算详解（一）CBOW模型

【万字长文】Word2Vec计算详解&#xff08;一&#xff09;CBOW模型 写在前面 本文用于记录本人学习NLP过程中&#xff0c;学习Word2Vec部分时的详细过程&#xff0c;本文与本人写的其他文章一样&#xff0c;旨在给出Word2Vec模型中的详细计算过程&#xff0c;包括每个模块的计…...

编程日记 2024/10/14 0:02:05

React Native源码学习

核心组件 基础组件&#xff1a;View、Text、Image、TextInput、ScrollView&#xff08;性能没有FlatList好&#xff0c;因为它会一次性把子元素渲染出来&#xff09;、StyleSheet交互组件&#xff1a;button列表视图&#xff1a;FlatList&#xff08;优先渲染屏幕上可见的元素&…...

编程日记 2024/10/13 23:55:59

【计网】从零开始认识https协议 --- 保证安全的网络通信

在每个死胡同的尽头&#xff0c; 都有另一个维度的天空&#xff0c; 在无路可走时迫使你腾空而起&#xff0c; 那就是奇迹。 --- 廖一梅 --- 从零开始认识https协议 1 什么是https协议2 https通信方案2.1 只使用对称加密2.2 只使用非对称加密2.3 双方都使用非对称加密2.4 …...

编程日记 2024/10/13 23:51:55

Ubuntu安装 MySQL【亲测有效】

在Ubuntu上安装MySQL数据库的步骤通常包括更新软件包列表、安装MySQL服务器、启动并配置MySQL服务等。以下是一个详细的安装指南&#xff1a; 一、更新软件包列表 首先&#xff0c;打开终端并输入以下命令来更新Ubuntu的软件包列表&#xff1a; sudo apt update二、安装MySQ…...

编程日记 2024/10/13 23:48:53

Unity 从零开始搭建一套简单易用的UGUI小框架 扩展与优化篇（完结）

一个通用的UGUI小框架就算是写完了&#xff0c;下面是一步步的思考与优化过程 Unity 从零开始搭建一套简单易用的UGUI小框架 基础分析篇-CSDN博客 Unity 从零开始搭建一套简单易用的UGUI小框架 功能撰写与优化篇-CSDN博客 从使用者的角度来整理一下可能会发出的疑问 0. Panel…...

编程日记 2024/10/13 23:46:51

MySQL多表操作--外键约束多表关系

外键约束介绍 Mysql外键约束&#xff08;foreign key&#xff09;是表的一个特殊字段&#xff0c;常与主键约束一起使用。外键约束是一种用于维护两个表之间数据一致性的方法。它确保引用表中的每个值都存在于主表中的某个列中。外键约束通常用于实现数据库的参照完整性。对于两…...

编程日记 2024/10/13 23:42:47

【python入门到精通专题】8.装饰器

装饰器是python语言中的语法糖&#xff0c;可以通过装饰器对函数的功能进行拓展。 为什么需要装饰器 我们假设你的程序实现了say_hello()和say_goodbye()两个函数。 def say_hello():print("hello!")def say_goodbye():print("hello!") # 此处应打印go…...

编程日记 2024/10/13 23:41:46

Halcon Blob分析提取小光斑

文章目录 算子complement 返回一个区域的补集select_region_point 选择包含指定像素的所有区域intensity 计算灰度值的均值和偏差 案例 算子 complement 返回一个区域的补集 complement(Region : RegionComplement : : )Region (输入对象)&#xff1a;这指的是输入的一个或多…...

编程日记 2024/10/13 23:40:45

Lua

1.声明一个变量 只要赋值一个变量&#xff0c;就相当于新建了一个变量&#xff0c;默认全局变量&#xff0c;加一个local前缀之后&#xff0c;这个变量就变成了局部变量 a1//全局变量 local b2//局部变量2.nil类型 在Lua里没有被声明过的变量都是nil&#xff0c;nil是一种类…...

编程日记 2024/10/13 23:39:44

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2025/9/28 6:54:16

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

编程新知 2025/9/29 1:56:58

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

编程新知 2025/9/30 16:13:37

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2025/9/30 14:10:05

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

编程新知 2025/9/28 3:30:00

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2025/9/28 3:30:31

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2025/9/28 6:33:38

Linux云原生安全：零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

编程新知 2025/7/5 23:14:36

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/7/24 7:13:48