参考实现原理，但是代码不够简洁，简洁代码参考：js操作cookie
实现一个点赞功能十分简单，主要问题在于不能重复点赞。
若是一个有用户的网站，可以通过数据库设计记录用户的点赞，这是可行的。
但是若是一个不记名的网站，如何记录一个用户呢？
这里有两种方法：
第一种是利用IP，维护一个IP表，记录点赞过的用户，防止该IP重复点赞，问题是IP可能会更换。
第二种是利用cookie，通过一个cookie标注一个用户，防止重复点赞，问题是cookie是可以修改的。
对于一个单纯的只需要展示热度的网站，利用IP或cookie实现点赞都是可以接受的。因为很少有人会无聊的利用这些缺陷刷赞。
这里给出利用js操作cookie实现点赞的代码。
首先约定cookie中点赞的格式为
“star”:”1,2,3…”
前台html（这里使用了TP的模板渲染，并用了bootstrap图标）
<div class="file-star" onclick="addStar({$f[id]})"> <a href="javascript:void(0)"> <span id="star{$f[id]}" class="glyphicon glyphicon-star-empty"> {$f[star]}</span> </a> </div>- 1
- 2
- 3
- 4
- 5
实现点赞的js函数
/*
* 实现点赞功能
* @param 资源id
* */
function addStar(id){ var star=getCookieById("star",id); if(star==""){ addCookieById("star",id,365); //后台点赞操作 $.ajax({ ..... }) }else{ alert("您已经点赞过啦！"); } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
addstar中调用的操作cookie的函数如下
/*
* 获取特定cookie的值
* @param cookie键
* @return cookie该键对应的值
* */
function getCookie(cname){ var name=cname+"="; var ca=document.cookie.split(';'); for(var i=0;i<ca.length;i++){ var c=ca[i].trim(); if(c.indexOf(name)==0) return c.substring(name.length,c.length); } return ""; } /* * 判断cookie键中是否有某个资源的id * @param cookie键 * @param 查询资源id * @return 存在返回true，否则返回"" * */ function getCookieById(cname,id){ var name=cname+"="; var ca=document.cookie.split(';'); var cValue=""; for(var i=0;i<ca.length;i++){ var c=ca[i].trim(); if(c.indexOf(name)==0) cValue=c.substring(name.length,c.length); } if(cValue!=""){ var cArray=cValue.split(","); for(var i=0;i<cArray.length;i++){ var c=cArray[i].trim(); if(c.indexOf(id)==0){ return true; } } } return ""; } /* * 添加某个资源id到cookie键中 * @param cookie键名 * @param 资源id * @param cookie过期时间 * */ function addCookieById(cname,id,exdays){ var cvalue=getCookie(cname); if(cvalue==""){ cvalue=id; }else { var cArray=cvalue.split(","); var flag=0; for(var i=0;i<cArray.length;i++){ var c=cArray[i].trim(); if(c.indexOf(id)==0){ flag=1; break; } } if(flag==0) { cvalue += "," + id; } } var d=new Date(); d.setTime(d.getTime()+(exdays*24*60*60*1000)); var expires="expires="+d.toGMTString(); document.cookie=cname+"="+cvalue+"; "+expires; }- 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
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
当用户重新刷新后，也要正确显示是否点赞否个资源，所以在body的onload中添加starInit()函数
扫描二维码关注公众号，回复：
111579 查看本文章
<body onload="starInit()">
...
</body>- 1
- 2
- 3
starInit函数
/*
* 页面刷新时正确显示是否点赞了某个资源
* */
function starInit(){ var star=getCookie("star"); if(star!=""){ var cArray=star.split(","); for(var i=0;i<cArray.length;i++){ var id=cArray[i].trim(); $("#star"+id).attr("class","glyphicon glyphicon-star"); } } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13