关闭

js记录用户行为浏览记录和停留时间

时间: 2018-06-06阅读: 1049标签: js知识

解决问题所使用的知识(可以跳过直接看下面的解决方案)

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");

weber.pub


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;
}
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/858

关闭

(...)这三个点在JavaScript中意味着什么?

解释JavaScript中三个点的作用:数组/对象扩展运算符、rest运算符(使用函数的参数时,无论是完全替换参数还是与函数的参数一起替换参数,这三个点也称为rest运算符)

javascript怎么输出?

JavaScript怎么输出?输出方式有哪些?下面本篇文章就给大家介绍JavaScript的几种输出方式。window.alert()方法用于显示带有一条指定消息和一个【确认】 按钮的警告框。

js判断是否为IE浏览器的多种方法总汇

这篇文章主要整理通过js来判断浏览器是否为IE的多种方法。使用js脚本判断浏览器是否为ie,这里分享六种判断是否为ie的方法,有需要的朋友参考学习下。

avaScript与WebAssembly进行比较+在哪些情况下会优于JavaScript

这是专门探索JavaScript及其构建组件的系列,在识别和描述核心元素的过程中,我们还分享了构建SessionStack时使用的一些经验法则,这是一个轻量级但健壮且高性能的JavaScript应用程序,以帮助用户实时查看和重现其Web应用程序的缺陷。

前端基础之BOM和DOM

JavaScript分为 : ECMAScript,DOM,BOM。BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”。DOM (Document Object Model)是指文档对象模型

js检测页面上一个元素是否已经滚动到了屏幕的可视区域内

只要页面加载了,其中在页面中出现的li就向控制台输出第几个发送请求;在本次加载的页面中,再将滚动条滚回前边的li,不再向控制台输出东西,也就是说已经显示过的li,不再向控制台输出东西。

为什么javascript不起作用?

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

JavaScript 优雅的实现方式包含你可能不知道的知识点【转】

Js优雅的实现方式包含你可能不知道的知识点:简短优雅地实现 sleep 函数,js获取时间戳,js数组去重,js数字格式化,js交换两个整数,将 argruments 对象(类数组)转换成数组,数字取整等

JavaScript 进阶问题列表

我在我的 Instagram 上每天都会发布 JavaScript 的选择题,并且同时也会在这个仓库中发布。从基础到进阶,测试你有多了解 JavaScript,刷新你的知识,或者帮助你的 coding 面试!

js设备判断_判断移动端还是PC端?判断android还是ios?判断移动端浏览器类型?

js判断用户的浏览设备是移动设备还是PC?判断详细浏览器设备信息。判断微信、新浪、QQ打开。判断是android系统还是ios系统...

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!