JavaScript cookie operation realizes the like function
Refer to the implementation principle, but the code is not concise enough, concise code reference: js operates cookies
Implementing a like function is very simple, the main problem is that it cannot be liked repeatedly.
If a website has users, it is feasible to record users' likes through database design.
But if it is an anonymous website, how to record a user?
There are two methods here:
the first is to use IP, maintain an IP table, record users who have liked, and prevent the IP from being liked repeatedly. The problem is that the IP may be changed.
The second is to use cookies to mark a user through a cookie to prevent repeated likes. The problem is that cookies can be modified.
For a website that only needs to show its popularity, it is acceptable to use IP or cookie to achieve likes. Because few people will be boring to use these defects to brush likes.
Here is the code that uses js to manipulate cookies to achieve likes.
First, it is agreed that the format of the like in the cookie is
“star”:”1,2,3…”
Front-end html (the template rendering of TP is used here, and the bootstrap icon is used)
<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 function to implement likes
/*
* 实现点赞功能
* @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
The functions that operate cookies called in addstar are as follows
/*
* 获取特定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
When the user refreshes, it is also necessary to correctly display whether the resource is liked or not, so add the starInit() function to the onload of the body
<body onload="starInit()">
...
</body>- 1
- 2
- 3
starInit function
/*
* 页面刷新时正确显示是否点赞了某个资源
* */
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