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

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

news 2025/11/16 15:11:37

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

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2025/9/22 20:29:32

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/9/8 13:50:07

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2025/11/15 22:41:12

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2025/11/14 9:23:26

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/10/13 7:34:19

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2025/9/14 3:58:53

日常一水C

多态 言简意赅&#xff1a;就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过&#xff0c;当子类和父类的函数名相同时&#xff0c;会隐藏父类的同名函数转而调用子类的同名函数&#xff0c;如果要调用父类的同名函数&#xff0c;那么就需要对父类进行引用&#…...

编程新知 2025/9/30 22:37:58

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

编程新知 2025/8/31 2:33:30

DeepSeek越强，Kimi越慌？

被DeepSeek吊打的Kimi&#xff0c;还有多少人在用&#xff1f; 去年&#xff0c;月之暗面创始人杨植麟别提有多风光了。90后清华学霸&#xff0c;国产大模型六小虎之一&#xff0c;手握十几亿美金的融资。旗下的AI助手Kimi烧钱如流水&#xff0c;单月光是投流就花费2个亿。 疯…...

编程新知 2025/11/15 16:09:36