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

轉載于:https://www.cnblogs.com/Yusco/p/7940991.html

總結

以上是生活随笔為你收集整理的js记录用户访问页面和停留时间的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。