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

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

news 2026/3/28 1:11:00

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

P15800 [GESP202603 六级] 选数

[GESP202603 六级] 选数 https://www.bilibili.com/video/BV1nCAEz2E1q/ P15800 [GESP202603 六级] 选数-信息学奥赛GESP等级考试真题解析 https://www.bilibili.com/video/BV14PwXzEEWL/ 202603GESP六级C第题1选数 https://www.bilibili.com/video/BV19nAnzgEt5/ P15800 [GESP…...

编程新知 2026/3/28 0:53:34

斗鱼季报图解：营收9亿同比降19% 经调整净利1260万

雷递网 雷建平 3月26日斗鱼(Nasdaq: DOYU)日前发布截至2025年12月31日的全年及第四季度财报。财报显示&#xff0c;斗鱼2025年营收为38.19亿元&#xff08;约5.46亿美元&#xff09;&#xff0c;较上年同期的42.71亿元下降10.58%。斗鱼2025年毛利为4.9亿元&#xff0c;经调整净…...

编程新知 2026/3/28 0:03:11

Qwen3-14B-AWQ模型效果深度评测：在算法题求解上的表现

Qwen3-14B-AWQ模型效果深度评测&#xff1a;在算法题求解上的表现 1. 评测背景与模型简介 在AI技术快速发展的今天&#xff0c;大语言模型在代码生成和算法解题领域展现出越来越强的能力。Qwen3-14B-Int4-AWQ作为通义千问系列的最新量化版本&#xff0c;在保持较高推理能力的…...

编程新知 2026/3/27 23:52:55

Java面向对象实战：从0到1手写奇偶判断工具类[特殊字符]新手保姆级教程

&#x1f338;你好呀&#xff01;我是断弦承露&#x1f31f;感谢陪伴&#xff5e; 小白博主在线求友&#x1f33f; 跟着小白学/Java/软件设计/鸿蒙开发/芯片开发&#x1f4d6;专栏汇总&#xff1a;《软件设计师》专栏 | 《Java》专栏 | 《 RISC-V 处理器实战》专栏 | 《Flutter…...

编程新知 2026/3/27 23:42:48

正点原子IMX6ULL史诗级新内核Linux7.0移植教程（5）梭哈配置主线设备树

正点原子IMX6ULL史诗级新内核Linux7.0移植教程&#xff08;5&#xff09;梭哈配置主线设备树 仓库已经开源&#xff0c;可以研究补丁和直接看完整教程&#xff1a;https://github.com/Awesome-Embedded-Learning-Studio/imx-forge 有任何意见欢迎提出 PR&#xff01;会第一时间…...

编程新知 2026/3/27 23:20:38

Simulink三相变压器模块深度解析：从参数配置到电力系统仿真实战

1. 三相变压器模块的核心功能解析 Simulink中的Three-Phase Transformer模块就像电力系统的"翻译官"&#xff0c;专门负责处理三相交流电的电压转换和相位调整。我在电力电子项目中最常使用的就是这个模块&#xff0c;因为它能完美还原真实变压器的各种"脾气秉…...

编程新知 2026/3/27 23:10:36

从锡膏印刷到炉温曲线：手把手调试你的第一条SMT生产线（避坑指南）

从锡膏印刷到炉温曲线&#xff1a;手把手调试你的第一条SMT生产线&#xff08;避坑指南&#xff09; 第一次接手SMT生产线调试时&#xff0c;我盯着那台二手贴片机的报警提示&#xff0c;手心全是汗。钢网上残留的锡膏像在嘲笑我的无知&#xff0c;而流水线上堆积的PCB板则不断…...

编程新知 2026/3/27 23:08:36

AD21实战：3种方法搞定Keepout和机械层互转，最后一种能救急

AD21实战&#xff1a;3种高效解决Keepout与机械层互转难题的方法 在PCB设计过程中&#xff0c;Keepout层和机械层的正确使用与转换是确保设计准确性的关键环节。许多工程师都遇到过这样的困境&#xff1a;当设计文件中包含复杂图形元素时&#xff0c;简单的层切换或属性批量修…...

编程新知 2026/3/27 22:54:25

【仿真】Carla跨平台部署指南：从零到一，附ROS2与Autoware.auto连接实战

1. Carla仿真平台概述 Carla是一款开源的自动驾驶仿真平台&#xff0c;基于虚幻引擎构建&#xff0c;能够提供高度逼真的城市环境和交通场景。我第一次接触Carla是在2018年&#xff0c;当时它还处于早期开发阶段&#xff0c;但已经展现出惊人的潜力。经过多年发展&#xff0c;现…...

编程新知 2026/3/27 21:45:58

Repomix Git日志集成：掌握commit历史分析的终极指南

Repomix Git日志集成&#xff1a;掌握commit历史分析的终极指南 【免费下载链接】repomix &#x1f4e6; Repomix (formerly Repopack) is a powerful tool that packs your entire repository into a single, AI-friendly file. Perfect for when you need to feed your codeb…...

编程新知 2026/3/27 21:33:56