js記錄用戶在網站的瀏覽記錄和停留時間(2)

時間 2019-12-06

原文原文鏈接

問題：上次的代碼確實解決了一部分用戶訪問記錄的收集，可是仍是存在一個問題就是咱們網站的註冊都是新頁面打開的，若是用戶剛進入網站就點擊註冊（打開了新的頁面），我代碼裏用到的 onbeforeunload 就沒法將用戶進入的頁面存儲到本地了，也就是致使訪問了網站直接點擊註冊的用戶沒法被記錄。因此此次對數據的記錄方式作了拆分。html

這個是上一次文章的連接：
http://weber.pub/js記錄用戶行爲瀏覽記錄和停留時間/163.htmlweb

思路

當用戶進入網站，頁面加載完成的時候執行 window.onload 把用戶的入口頁面，訪問頁面，訪問時間等數據記錄下來，若是用戶直接打開新頁面註冊，就把這個數據帶到後臺。若是用戶繼續訪問，該頁面關閉時在執行 window.onbeforeunload 將用戶的訪問時長、關閉頁面時間補充記錄到剛纔的數據之中（數據經過我生成的一個隨機數做爲key來進行關聯）。express

解決問題所使用的知識（能夠跳過直接看下面的解決方案）

一、setInterval

setInterval() 方法可按照指定的週期（以毫秒計）來調用函數或計算表達式。json

setInterval(code,millisec[,"lang"])

code 必需。要調用的函數或要執行的代碼串。服務器
millisec 必須。週期性執行或調用 code 之間的時間間隔，以毫秒計。cookie
lang 可選。 JScript | VBScript | JavaScriptdom

二、localStorage

HTML5 提供的客戶端存儲數據的新方法，localStorage 沒有時間限制的數據存儲。函數

以前，這些都是由 cookie 完成的。可是 cookie 不適合大量數據的存儲，由於它們由每一個對服務器的請求來傳遞，這使得 cookie 速度很慢並且效率也不高。對於不一樣的網站，數據存儲於不一樣的區域，而且一個網站只能訪問其自身的數據。網站

存儲數據方法url

var arr = [0, 1, 2, 3];
localStorage.setItem("num", arr);

讀取數據方法

localStorage.getItem("num");

三、onbeforeunload

onbeforeunload 事件在即將離開當前頁面（刷新或關閉）時觸發。
該事件可用於彈出對話框，提示用戶是繼續瀏覽頁面仍是離開當前頁面。

另外：

頁面加載時只執行onload
頁面關閉時先執行onbeforeunload，最後onunload
頁面刷新時先執行onbeforeunload，而後onunload，最後onload。

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

五、JSON.stringify

JSON.stringify()將 JavaScript 值轉換爲 JavaScript 對象表示法 (Json) 字符串（詳細解釋可參照）

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