在没有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的感觉真好。
AD
