js记录用户在网站的浏览记录和停留时间(2)

news/2024/4/27 13:36:11/文章来源:https://blog.csdn.net/weixin_33896726/article/details/89291807

问题:上次的代码确实解决了一部分用户访问记录的收集,但是还是存在一个问题就是 我们网站的注册 都是新页面打开的,如果用户刚进入网站就点击注册(打开了新的页面) ,我代码里用到的 onbeforeunload 就无法将用户进入的页面存储到本地了,也就是导致 访问了网站 直接点击注册的用户 无法被记录。所以这次对数据的记录方式做了拆分。

这个是上一次文章的链接:
http://weber.pub/js记录用户行为浏览记录和停留时间/163.html

思路

当用户进入网站,页面加载完成的时候执行 window.onload 把用户的入口页面,访问页面,访问时间等数据记录下来,如果用户直接打开新页面注册,就把这个数据带到后台。如果用户继续访问,该页面关闭时在执行 window.onbeforeunload 将用户的访问时长、关闭页面时间补充记录到刚才的数据之中(数据通过我生成的一个随机数作为key来进行关联)。

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

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

weber.pub

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;
}

详细代码如下

// 统计用户 访问网站步骤记录
var tjSecond = 0;
var tjRandom = 0;
window.setInterval(function () {tjSecond ++;
}, 1000);
// 随机数
tjRandom = (new Date()).valueOf();
// 用户第一次访问页面记录部分数据
window.onload = function () {var tjArr = localStorage.getItem("jsArr") ? localStorage.getItem("jsArr") : '[]';var dataArr = {'tjRd' : tjRandom,'url' : location.href,'refer' : getReferrer()};tjArr = eval('(' + tjArr + ')');tjArr.push(dataArr);var tjArr1= JSON.stringify(tjArr);localStorage.setItem("jsArr", tjArr1);
};
// 用户继续访问根据上面提供的key值补充数据
window.onbeforeunload = function() {var tjArrRd = eval('(' + localStorage.getItem("jsArr") + ')');var tjI = tjArrRd.length - 1;if(tjArrRd[tjI].tjRd == tjRandom){tjArrRd[tjI].time = tjSecond;tjArrRd[tjI].timeIn = Date.parse(new Date()) - (tjSecond * 1000);tjArrRd[tjI].timeOut = Date.parse(new Date());var tjArr1= JSON.stringify(tjArrRd);localStorage.setItem("jsArr", tjArr1);}
};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;
}

by web开发者 from http://weber.pub/

本文地址: http://weber.pub/js记录用户行为浏览记录和停留时间/163.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_746303.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

burpsuite只拦截特定网站数据包教程

一、背景说明 在配置burpsuite代理截包时经常会遇到这样的情况: 浏览器经常自己发一些包(收集用户信息),干挠渗透测试人员对目标网站的检测; 如果是代理手机,那就是很多APP都时不时发一些包,干挠…

【转载】大型网站性能

参考这篇文章:http://www.csdn.net/article/2014-09-30/2821940 把整个过程,分为三段路径: 第一段在用户和浏览器端,主要负责发出用户请求,以及接受响应数据进行计算渲染显示给用户;第二段在网络上&#xf…

用户域名注册后 需要在租服务器吗,搭建论坛需要租用什么样的网站服务器

搭建论坛可能对于普通的站长还是比较遥远的事情,但是对IT行业有比较深刻了解的站长,他们往往喜欢选择搭建一个论坛,聚集一些属于自己的人气。那么搭建论坛需要租用什么样的网站服务器呢?我们知道,论坛它比普通网站需要…

40个新鲜的 jQuery 插件,使您的网站用户友好

作为最流行的 JavaScript 开发框架,jQuery 在现在的 Web 开发项目中扮演着重要角色,它简化了 HTML 文档遍历,事件处理,动画以及 Ajax 交互,这篇文章特别收集了40个新鲜的 jQuery 插件,使您的网站对用户更友…

一些好用的网站

一些好用的网站 Latex公式:http://www.mohu.org/info/symbols/symbols.htm Latex公式:https://www.luogu.org/blog/IowaBattleship/latex-gong-shi-tai-quan 在线latex公式编辑器:http://private.codecogs.com/latex/eqneditor.php LaTeX入门…

php xml网站地图生成,dedecms程序后台生成XML网站地图方法

网站为什么要生成XML地图?因为蜘蛛只能用XML地图来导航,为了更好的被收录,所以才要利用XML地图文件做sitemap。像我们的主站也是有导航的xml文件的哦,51PHP百度MAP 51PHP谷歌MAP;今天无忧主机小编教您如何制作简单可…

网站服务器和与主机区别,网站服务器和主机的区别

网站服务器和主机的区别 内容精选换一换本文介绍通过华为云市场镜像“Drupal内容管理系统(LAMP)”搭建Drupal网站的方法。Drupal是使用PHP语言编写的开源内容管理框架(CMF),它由内容管理系统(CMS)和PHP开发框架(Framework)共同构成。Drupal用于构造提供多种功能和服…

一个成功的响应式网站该怎么策划

原文链接一个成功的响应式网站该怎么策划建站宝盒 2017-05-18 15:40:28 浏览55 评论0html5 网站建设 用户体验摘要: 一个成功的响应式网站需要具备公信力、营销力、传播力,要达到这样的要求网站策划就显得非常关键,网站策划是企业网站建设的重…

SharePoint Online 创建门户网站系列之母版页

前 言 虽然SharePoint中母版页看起来只是头部Banner和底部版权信息这两个部分,但是实质在SharePoint Online中的页面模型中占有重要地位,而且SPO对母版页有着完善的签入签出机制和版本控制,方便使用。 同时,除了保持网站所有页面的…

华纳云香港CN2站群服务器,1C/2C/4C不同C段可选,多达253个独立IP,SEO优化推广首选 含测评

香港站群服务器应用场景: **1.PBN站群SEO:**PBN站群拥有多个独立ip,且互不干扰。快速稳定的网站表现才可以吸引到更多的用户及蜘蛛爬行。 **2.跨境电商运营:**无论第三方平台开店还是自建店群都要求能够让买家快速访问&#xff0c…

Hulu李彬:看到不一样的视频网站,所遇挑战何尝不是一次革新的机会?

Hulu软件技术开发有限公司(以下简称Hulu)是美国三大电视网NBC、福克斯、迪斯尼合力在2007年建立的在线视频服务网站,主要目的是使传统媒体业务转型成数字新媒体,能够让更多的用户通过互联网上的不同的平台和方式访问视频内容。 此…

【ASP.NET基础】简单企业产品展示网站--产品编辑CRUD

摘要:本文记录创建一个小的、简单的产品网站的步骤。 一,搭建一个简单的产品展示网站,熟悉以下知识点:NVelocity模板引擎、Ajax无刷新页面请求,文件上传,Row_Number实现分页,ckEditor使用&#…

记一次JavaWeb网站技术架构总结

题记工作也有几多年了,无论是身边遇到的还是耳间闻到的,多多少少也积攒了自己的一些经验和思考,当然,博主并没有太多接触高大上的分布式架构实践,相对比较零碎,随时补充(附带架构装逼词汇)。俗话说的好&…

LVS和nginx反向代理网站架构

LVS和nginx反向代理网站架构 nginx反向代理和lvs的dr都存在单点,要keepalived做高可用,但是成本高了 f 转载于:https://www.cnblogs.com/MYSQLZOUQI/p/5100056.html

【web标准设计】学习、提高、欣赏网站推荐

【web标准设计】学习、提高、欣赏网站推荐(转)文章包含的一些粗俗、庸俗、恶心的言语可能造成您阅读后的不适感,请谨慎选择是否阅读。如你自愿阅读本文,因粗俗、庸俗、恶心的言语给您所造成的任何后果,本文作者不负任何责任。 华丽…

zabbix-自定义监控项(监控网站80连接数)

自定义监控项(监控网站80连接数) 需求:监控某台web的80端口连接数,并出图; 第一步:客户端创建脚本: 客户端定义脚本,并编辑zabbix-agent配置文件实现运行定义的脚本; 客户…

大型网站技术架构(一)--大型网站架构演化

转自:https://blog.csdn.net/chaofanwei/article/details/26865169 看完了有一本书,就应该有所收获,有所总结,最近把《大型网站技术架构》一书给看完了,给人的印象实在深刻,再加上之前也搞过书本上讲的反向…

传统IDC 部署网站

选择IDC机房 1.选择云主机。 2.传统IDC a购买服务器 b服务器托管 c装系统 装系统 虚拟机软件 vmware workstation virtualbox hyper-v 下载:r.aminglinux.como 系统下载: http://mirrors.163.com/centos/7.6.1810/isos/x86_64/CentOS-7-x86_64-DVD-1810.…

使用phpstudy一键搭建网站

在软件管理中选择要安装的服务。 安装成功以后点击一键搭建 设置域名端口号根目录等信息后点击确定 开启apache和mysql服务 打开浏览器输入域名登录网站 也可以使用在网上找到的套件进行搭建 将套件解压至phpstudy的根目录下 单击创建网站配置好域名端口根目录 单击创建数据库并…