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示例图：

js处理文章详情页点击量统计

　　该cookie将会在30分钟后过期，30分钟后，同一ip再次访问此页面，该文章的点击数就会再次加1。

秒客网

js处理文章详情页点击量统计

相关文章