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


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