JavaScript 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>

实现点赞的js函数

/*
* 实现点赞功能
* @param    资源id
* */
function addStar(id){var star=getCookieById("star",id);if(star==""){addCookieById("star",id,365);//后台点赞操作$.ajax({.....})}else{alert("您已经点赞过啦！");}
}

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;
}

当用户重新刷新后，也要正确显示是否点赞否个资源，所以在body的onload中添加starInit()函数

<body onload="starInit()">
...
</body>

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");}}
}

这里展示一个演示网址，请大家手下留情

JavaScript cookie操作实现点赞功能相关推荐

php qq点赞,javascript - 手机qq的点赞功能实现原理？
过去多啦不再A梦2017-05-19 10:18:383楼本来想贴代码,有点长麻烦我的做饭是把弹出变大的那个数字单独给一个p 然后给这个p加动画的样式 js文件抽离有点麻烦,给你看我的css的 ...
javascript / jquery 操作 cookie
什么是Cookie? 谓Cookie,是网页通过浏览器保存在用户本地计算机上的一小段数据 .用户再次访问该网页的时候,浏览器会将这一小段数据发送给该网页.Cookie是网景公司的前雇员Lou M ...
JavaScript实现评论点赞功能
通过分析评论功能的逻辑关系,学会如何使用JavaScript实现评论.回复.点赞等各种功能 1.学会JavaScript处理日期和时间. 2.掌握Dom操作中的添加/删除子节点方法. 3.使用setT ...
php cookie突然没,PHP利用Cookie设置用户30分钟未操作自动退出功能
登陆控制器需要做的登陆成功把用户ID等信息存入cookie: $this->systemSetKey(array('name'=>$admin_info['admin_name'], 'i ...
php登录后自动退出登录,PHP利用Cookie设置用户30分钟未操作自动退出功能
登陆控制器需要做的登陆成功把用户ID等信息存入cookie: $this->systemSetKey(array('name'=>$admin_info['admin_name'], 'i ...
在JavaScript中操作Cookie
在Windows系统中,cookie通常是被储存在C:\Documents and settings\用户名\cookie目录下(如果系统在C盘).其实每个cookie实际上就是一个文本文件,里面是用 ...
cookie 操作详解 (asp.net javascript)
(1)ASP.NET cookie 操作详解|cookie 写入.读取.修改.删除2008年10月18日 //写入 protected void Button2_Click(objec ...
使用JavaScript实现评论点赞功能
http://www.php.cn/js-tutorial-357679.html 首页> js教程> 正文使用JavaScript实现评论点赞功能作者: default|标签:jav ...
js 包含某个字符串_[译] 5 大 JavaScript 字符串操作库
原文地址:5 String Manipulation Libraries for JavaScript 原文作者:Mahdhi Rezvi 译文出自:掘金翻译计划本文永久链接:https://git ...

JavaScript cookie操作实现点赞功能

JavaScript cookie操作实现点赞功能相关推荐

最新文章

热门文章