js记录用户行为浏览记录和停留时间(转)
演示地址:http://weber.pub/demo/160902/test.html
测试源码下载:http://pan.baidu.com/s/1nvPKbSP 密码:r147
解决问题所使用的知识(可以跳过直接看下面的解决方案)
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.pub","name":"web开发者","time":"160902"},{"url":"www.weber.pub","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
(关于 cookie
的使用有问题可以查看这篇文章的介绍原生js和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;
}
本文地址: http://weber.pub/js记录用户行为浏览记录和停留时间/163.html
js记录用户行为浏览记录和停留时间(转)的更多相关文章
- cookie记录用户的浏览商品的路径
在电子商务的网站中,经常要记录用户的浏览路径,以判断用户到底对哪些商品感兴趣,或者哪些商品之间存在关联. 下面将使用cookie记录用户的浏览过的历史页面.该网站将每个页面的标题保存在该页面的$TIT ...
- (JS实现顾客商品浏览记录以及购物车)Cookie的保存与删除
//JS实现顾客浏览商品的记录以及实现购物车的功能function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.s ...
- php中如何实现网上商城用户历史浏览记录的代码
/如是COOKIE 里面不为空,则往里面增加一个商品ID if (!empty($_COOKIE['SHOP']['history'])){ //取得COOKIE里面的值,并用逗号把它切割成一个数组 ...
- PHP Cookei记录用户历史浏览信息的代码
[基础]Cookie常用方法:$_COOKIE['RecordLuHuiDUDU'] 得到Cookiesetcookie('RecordLuHuiDUDU',",time()-3600*24 ...
- [开发笔记]-js判断用户的浏览设备是移动设备还是PC
最近做的一个网站页面中需要根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的. 下面给出js判断处理代码,以作参考. <script type="te ...
- (转)[开发笔记]-js判断用户的浏览设备是移动设备还是PC
<script type="text/javascript"> function browserRedirect() { var sUserAgent = naviga ...
- js判断用户的浏览设备是移动设备还是PC
<script type="text/javascript"> function browserRedirect() { var sUserAgent = naviga ...
- js记录用户在网站的浏览记录和停留时间
by weber开发者 from http://weber.pub/ 本文地址: http://weber.pub/js记录用户行为浏览记录和停留时间/163.html 问题 公司想统计一个用户从进入 ...
- 使用Cookie实现用户商品历史浏览记录
该功能分为四个模块: 1. 获取所有商品并以链接的形式显示 out.write("网站商品: <br/>"); Map<String, Book> book ...
随机推荐
- BNU10791:DOTA选人
DOTA(Defense of the Ancients)是一款很受欢迎的游戏.DOTA将10个游戏玩家分为两组,分别为天灾和近卫,推倒对方主基地的一方获得胜利.每个玩家可以选择一个英雄作为游戏中的角 ...
- Windows使用WxWidgets开发界面(c++)环境搭建
一直想学习wxWidgets,之前使用的都是wxPython,现在终于鼓起勇气学习这个了,发现原来是基于vc6.0开发的.所以最好的学习办法就是安装vistual studio 2010,方便学习看代 ...
- [RxJS] Updating Data with Scan
You often need to update the data flowing through the stream with custom logic based on what you nee ...
- resin安装和配置
1 从 http://www.caucho.com/download/ 下载resin 2 检查你的linux环境,查看是否安装了 jdk1.5 或以上版本,是否安装了perl. 输入命令:Java ...
- WebApi2官网学习记录---Media Formatters
Web API内建支持XML.JSON.BSON.和form-urlencoded的MiME type. 创建的自定义MIME类型要继承一下类中的一个: MediaTypeFormatter 这个类使 ...
- (转)第一天 XHTML CSS基础知识 文章出处:标准之路(http://www.aa25.cn/div_css/902.shtml)
欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...
- 工程与科学数值方法的Matlab实现
%stats.m function [mean,stdev]=stats(x) n=length(x);mean=sum(x)/n;stdev=sqrt(sum((x-mean).^2/(n-1))) ...
- angular 指令梳理 —— 前端校验
angular js内置校验的扩展 校验成功则 scope.formName.$valid=true 校验失败 元素的class: ng-invalid 成功:.ng-valid /** * 校验指 ...
- C语言中的sizeof和strlen
1.sizeof是算符,strlen是函数: 2.sizeof可以用类型做参数,strlen只能用char*做参数,且必须是以''\0''结尾的: 3.大部分编译程序,在编译的时候就把sizeof计算 ...
- 【6】Laravel5.1的migration数据库迁移
查看Laravel5.1的目录 当你配置好数据库后,在命令行执行下边的操作 php artisan migrate 打开数据库会发现,我们的数据库多了四个表,神奇吧! 打开任意一个migration查 ...