網頁記錄用戶在網站的瀏覽記錄和停留時間

有針對性的對客戶行爲進行分析，瞭解用戶的真正需求，所以需要記錄用戶的瀏覽信息

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