問題

公司想統計一個使用者從進入官網到註冊，這個流程該使用者整個的瀏覽路線，在哪個頁面停留的時間比較長，從而更有針對性的對客戶行為進行分析，瞭解使用者的真正需求。。。

雖然百度統計之類的也可以記錄使用者的瀏覽行為，但是這類統計是全部跟蹤使用者，而無法精確的跟蹤到註冊的使用者之前一系列的行為，而我們只需要針對註冊使用者進行有目的性的行為分析。。。

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

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

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