网页记录用户在网站的浏览记录和停留时间
有针对性的对客户行为进行分析,了解用户的真正需求,所以需要记录用户的浏览信息
1、setInterval
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval(code,millisec[,"lang"])
code
必需。要调用的函数或要执行的代码串。millisec
必须。周期性执行或调用code
之间的时间间隔,以毫秒计。lang
可选。JScript | VBScript | JavaScript
2、localStorage
HTML5 提供的客户端存储数据的新方法,localStorage 没有时间限制的数据存储。
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie速度很慢而且效率也不高。对于不同的网站,数据存储于不同的区域,并且一个网站只能访问其自身的数据。
- 存储数据方法
var arr = [0, 1, 2, 3];
localStorage.setItem("num", arr);
- 读取数据方法
localStorage.getItem("num");
3、onbeforeunload
onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发。
该事件可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面。
另外:
- 页面加载时只执行onload
- 页面关闭时先执行onbeforeunload,最后onunload
- 页面刷新时先执行onbeforeunload,然后onunload,最后onload。
4、eval()
eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
这里我使用eval() 来解析JSON字符串。
var dataObj=eval("("+data+")");//转换为json对象
eval这里要添加"("+data+")" 一对小括号,原因在于:eval本身的问题。 由于json是以{}的方式来开始以及结束的,在JS中,它会被当成一个语句块来处理,所以必须强制性的将它转换成一种表达式。
加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语句(statement)来执行。
var weber = '[{"url":"weber","name":"web开发者","time":"160902"},{"url":"weber","name":"canglingyue","time":"160823"}]';
var eWeber = eval('(' + weber + ')');
console.log(eWeber);
5、JSON.stringify
JSON.stringify()将JavaScript值转换为JavaScript对象表示法 (Json) 字符串(详细解释可参照)
6、referrer
refer 是用来获取用户来路url 就是告诉人家我是从哪个页面过来的,可以用于统计访问本网站的用户来源,也可以用来防盗链。
function getReferrer() {var referrer = '';try {referrer = window.top.document.referrer;} catch(e) {if(window.parent) {try {referrer = window.parent.document.referrer;} catch(e2) {referrer = '';}}}if(referrer === '') {referrer = document.referrer;}return referrer;
}
解决方案
原来是想使用 cookie 来记录,但是考虑到 cookie 所能记录的数据最大为 4k ,可能不够用,于是使用了 HTML5 的 localStorage (最大数据 5M )来存储( IE8 以上浏览器支持)。这里使用到了 jquery.cookie 的插件,所以页面要引入 jquery 和 jquery.cookie
代码分段解析
var second = 0;
window.setInterval(function () {second ++;
}, 1000);
当用户进入页面我们就会启动一个定时器,这个定时器可以记录用户在该页面浏览时间
var tjArr = localStorage.getItem("jsArr") ? localStorage.getItem("jsArr") : '[{}]';
$.cookie('tjRefer', getReferrer() ,{expires:1,path:'/'});
定义存储数据的变量 tjArr
,如果已经存到 localStorage
则从中读取,没有这初始化数据。
获取用户的 refer
信息,并存入 cookie
之中(后面解决页面刷新问题会使用到)。
var dataArr = {'url' : location.href,'time' : second,'refer' : getReferrer(),'timeIn' : Date.parse(new Date()),'timeOut' : Date.parse(new Date()) + (second * 1000)
};
定义一个JSON
用来存储用户浏览数据,用户访问页面url
、用户页面停留时间、用户来源页面、用户进入页面时间、用户离开页面时间。
tjArr = eval('(' + tjArr + ')');
tjArr.push(dataArr);
tjArr= JSON.stringify(tjArr);
localStorage.setItem("jsArr", tjArr);
数据解析和存储过程
用户刷新页面问题的解决
if($.cookie('tjRefer') == ''){var tjT = eval('(' + localStorage.getItem("jsArr") + ')');if(tjT){tjT[tjT.length-1].time += second;var jsArr= JSON.stringify(tjT);localStorage.setItem("jsArr", jsArr);}
}
用户刷新页面会导致我们的定时器重置,也就是说如果我们不处理的话,会再次记录这个页面的浏览记录(这是我们不希望看到的),于是我就想到 用刷新页面时 refer 信息为空来作为判断,我们去读取存到 cookie 中的 refer 信息作为判断条件。
如果用户刷新页面,我们就取出 最后一次 存入 localStorage 中的时间和本次的浏览时间相加,然后在更新最后一次存入的 localStorage 中。
整体代码的展示
var second = 0;
window.setInterval(function () {second ++;
}, 1000);
var tjArr = localStorage.getItem("jsArr") ? localStorage.getItem("jsArr") : '[{}]';
$.cookie('tjRefer', getReferrer() ,{expires:1,path:'/'});
window.onbeforeunload = function() {if($.cookie('tjRefer') == ''){var tjT = eval('(' + localStorage.getItem("jsArr") + ')');if(tjT){tjT[tjT.length-1].time += second;var jsArr= JSON.stringify(tjT);localStorage.setItem("jsArr", jsArr);}} else {var tjArr = localStorage.getItem("jsArr") ? localStorage.getItem("jsArr") : '[{}]';var dataArr = {'url' : location.href,'time' : second,'refer' : getReferrer(),'timeIn' : Date.parse(new Date()),'timeOut' : Date.parse(new Date()) + (second * 1000)};tjArr = eval('(' + tjArr + ')');tjArr.push(dataArr);tjArr= JSON.stringify(tjArr);localStorage.setItem("jsArr", tjArr);}
};
function getReferrer() {var referrer = '';try {referrer = window.top.document.referrer;} catch(e) {if(window.parent) {try {referrer = window.parent.document.referrer;} catch(e2) {referrer = '';}}}if(referrer === '') {referrer = document.referrer;}return referrer;
}
源码下载地址 https://download.csdn.net/download/qq_34115898/11238794
转自https://blog.csdn.net/canglingyue/article/details/52409265
网页记录用户在网站的浏览记录和停留时间相关推荐
- js记录用户在网站的浏览记录和停留时间
问题 公司想统计一个用户从进入官网到注册,这个流程该用户整个的浏览路线,在哪个页面停留的时间比较长,从而更有针对性的对客户行为进行分析,了解用户的真正需求... 虽然百度统计之类的也可以记录用户的浏览 ...
- JS实现记录用户在网站的停留时间
JS实现记录用户在网站的停留时间 今天给了一个需求让实现记录用户在当前页面进行操作的时间,如果两分钟之内没有进行操作就停止记时,直到再次操作时才开始继续记时.起初我自己用监听加定时器的方案实现,但是逻 ...
- python-- 模拟淘宝自动回复--文件读写的问题//记录用户的登录日志(记录登录时间)
记录用户的登录日志(记录登录时间)--磁盘的操作--文件读写的操作 import time #使用函数 --使用时间 #显示日志 def show_info():print('输入提示数字,执行相应的 ...
- 【01】网页中清除历史浏览记录能不能彻底删除浏览记录?
不能-- 即便你把记录全删了,也可用数据恢复工具给你找回来: 即便你用专业工具覆盖N遍,确保数据无法恢复,网站那头还记着哪个ip什么时候访问过哪些内容呢--然后跑ISP(联通或电信)一查,xx时间xx ...
- 媒体平台全量公开用户IP属地甚至浏览记录引争议,数据合规你关注到了吗?
早先,微博.抖音.小红书等多个平台的个人主页界面或其发表的评论全面显示其IP所在地,境内精确到省一级,境外可以显示国家,并且IP属地为强制显示项目,用户不能主动开启或关闭.近日,微博又推出了一个新功能 ...
- php使用cookie获取浏览记录,php 使用COOKIE制作浏览记录_PHP教程
文件1 cookieHistory.class.php times = time()+$times; if(!empty($name)) $this->cookiename = $name; i ...
- JAVAEE model1模型实现商品浏览记录(去除重复的浏览记录)(一)
在javaee中Model1模型是以jsp页面为中心的,jsp既要对浏览器的request做出逻辑处理(使用javabean),访问数据库也要显示出相关的页面. 在model1模型中 没有servle ...
- 查询计算机有浏览记录吗,如何查看电脑浏览记录 通过电脑日志查看浏览记录方法...
电脑日志的级别有3种,第1种信息:这类信息我们可以不用理会,一般都是程序正常运行的痕迹:每2种错误:这类信息我们要侧重关注,因为这类信息代表着程序或都系统出现了错误,我们要修复的错误都出现在这里:第3 ...
- java记录访问次数_Java 利用监听器来实现记录用户访问网站次数(示例代码)
假如有这么一个需求,要记录所有用户访问某一页面的次数. 最先想到的可能是在该Controller定义一个静态成员,然后在相应Action里自增.但这样有一个问题,就是Tomcat或者其他服务器重启的话 ...
最新文章
- 【camera】基于深度学习的车牌检测与识别系统实现(课程设计)
- linux下c语言写文件,Linux下C语言之文件操作
- 在线学位课程_如何选择计算机科学学位课程
- Maven学习-项目对象模型
- 数据库 事务的特性ACID
- rewrite 帮助实现页面静态化
- 氪纪2015| 虚拟与现实的距离——听听从业者的声音【中篇】
- 实例 18错误输出信息与调试信息
- 不用math type解决word公式上浮问题
- spring cloud微服务注册中心EurekaServer
- 【bzoj2588/P2633】count on a tree —— LCA + 主席树
- 微信内置浏览器缓存清理及关闭微信默认的X5内核
- W ndows7安装Hp1020,hp1020打印机驱动
- 抖音去除水印还原真实视频解析
- 深入理解多线程(四)— Moniter的实现原理
- 模仿微信九宫格、查看大图
- vue开发公众号 在钩子里面处理登录获取code
- 二分查找理论(三种问题类型、两种算法形式)
- linux练习平台WarGame之bandit通关日志
- DigiCert SSL证书过期了怎么办
热门文章
- iTextPdf最简单最彻底解决中文显示
- 性能测试中你是否遇见过频繁fgc的问题呢?
- 微软xcloud服务器,微软云游戏Project xCloud已在PC上展开了内部测试
- VJ Runtime Error(运行错误)
- C语言——正负数交替求和(通俗易懂)1/1-1/2+1/3-1/4......
- android逆时针方向横屏,Android屏幕镜像工具 “Scrcpy “增加了旋转锁,提高了质量...
- javascript 中cookie的存储,获取cookie,删除cookie的方法
- 基于SSM的家教信息平台网站设计及数据分析系统
- 火龙果具有润肠、滑肠作用
- Java如何监控数据库表的变化,java监听数据库表变化