JS版本简单页面计数器

Posted by JunMing on 2019-05-11

在没有PHP的情况下,如何实现页面的访问计数?

如果有PHP或者ASP,实现页面计数是很简单的事情。但是如果只有JS,如何实现页面计数呢? JS是运行在客户端的,怎样实现一个持久化的计数呢? 前些天集成Valine的时候,受到启发,原来用JS实现页面计数是非常简单的。

新建应用

leancloud 注册帐户后,新建应用。每个应用都有自己的APPID,APPKEY.

新建

引入sdk,利用APPID,APPKEY初始化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
</head>

//初始化
<script>
if(!AV.applicationId)
{
AV.init({
appId: 'leancloud_appid',
appKey: 'leancloud_appkey'
});
}
</script>

实现计数

简单的计数就是一对key/value。key就是document.URL,value就是计数。逻辑上也可以简化为:先查看Key是否存在,如果存在则计数+1,否则新建Key.然后定义一个Id用来显示计数即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
//新建对象
function createNewCounter()
{
// 声明一个 Counter 类型
var Counter = AV.Object.extend('Counter');
// 新建一个 Counter 对象
var counter = new Counter();
console.log(document.URL);
counter.set('title', document.URL);
counter.set('counter', 0);
counter.save().then(function (counter) {
// 成功保存之后,执行其他逻辑.
console.log('New object created with objectId: ' + counter.id);
}, function (error) {
// 异常处理
console.error('Failed to create new object, with error message: ' + error.message);
});
}
//显示计数
function showPageView()
{
var query = new AV.Query('Counter');
query.equalTo('title', document.URL);
query.find().then(function (results) {
if(results.length > 0)
{
var cnt=results[0].get('counter');
results[0].increment('counter');
results[0].save().then(function (counter) {});
document.getElementById('leancounter').innerHTML=''+(cnt+1);
}
else
{
createNewCounter();
document.getElementById('leancounter').innerHTML=1;
}
}, function (error) {

console.error('Failed to find object, with error message: ' + error.message);
});

}

HTML 代码:

1
<i id="leancounter"></i>

结尾

摆脱了PHP的感觉真好。