js處理文章詳情頁點擊量統計

具體需求：在文章管理系統中，需要統計文章詳情頁面的點擊量，來體現該文章是否受用戶歡迎，方便管理員調整日后編輯新文章時的內容方向。

解決方案：設置有過期時間的cookie

　　我們在訪問文章詳情頁面時，拿到該文章的id和該文章所屬欄目的id，配合一些特殊符號，以組合成一個獨一無二的專屬該文章頁的cookie名，避免影響其他文章頁面的點擊量統計。例如有一篇文章名為《水滸傳內容簡析》的文章，該文章id為7，隸屬於《四大名著》欄目下，該文章欄目為2，我給出一段特殊字符串:"jia"。則該文章的cookie名為字符串：2jia7。

　　當前網頁點擊量的計算，並沒有一個明確的計算方式。同一ip訪問同一頁面，停留時間超過多久，另算一個點擊量。這個停留時間即是cookie的過期時間，按自身情況設置即可，我設置的時間為30分鍾。

　　目前我采用了jquery.cookie.js來設置cookie，當然你要用JavaScript來設置cookie也是可以的。

代碼：

　　前端頁面增加一個隱藏的輸入框，在body加載完成后觸發增加點擊量的js函數addclick()：

<body onload="addclick()">
<input id="addclick" type="hidden" name="/article/article/addclick" value="{$articleInfo.id}" class="{$articleInfo.articlecloumnid}">

　　在這段代碼中，我采用了thinkphp框架，隱藏的輸入框中具體存儲的內容：name中儲存處理 增加點擊量事件 的php文件路徑，value中儲存該文章id，class中儲存該文章所屬欄目id。

　　js代碼：

//用戶點擊文章或是課程的詳情頁，點擊量加1
function addclick(){
    var id = $('#addclick').val();//拿到文章id，后台文件會根據此id，到數據庫為此id的文章的點擊量加1
    var cookieName = $('#addclick').attr('class') + 'jia' + id;//組合獨一無二的專屬該文章的cookie名

    var jsonString = {"id":id};
    var url = $('#addclick').attr('name');//拿到后台處理 增加點擊量事件 的php文件路徑

    if($.cookie(cookieName)==null){//如果沒有這個cookie，則說明是第一次點擊該頁面，或者已經過去了30分鍾，可以給點擊量+1了
        $.ajax({
            type : "post",
            url : url,
            data : jsonString,
            async : true,
            success: function(msg){
                var date = new Date();
                date.setTime(date.getTime()+30*60*1000);//只能這么寫，30表示30分鍾
                $.cookie(cookieName,cookieName,{expires: date});//創建一個過期時間為30分鍾的cookie
                //點擊量成功加1，則打印信息
                console.log(msg);
                },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                console.log("連接超時！");
            }
        });
    }
};

　　后台邏輯我就不貼出來了，基本就是數據庫連接，然后只要有ajax上傳，就根據post過來的文章id，對文章點擊量進行加1。

　　cookie示例圖：

　　該cookie將會在30分鍾后過期，30分鍾后，同一ip再次訪問此頁面，該文章的點擊數就會再次加1。