JavaScript cookie操作实现点赞功能

参考实现原理,但是代码不够简洁,简洁代码参考: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()函数

<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

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

JavaScript cookie操作实现点赞功能的更多相关文章

  1. javascript cookie 操作

    <html> <head> <meta charset="utf-8"> <title>Javascript cookie</ ...

  2. javascript cookie操作.

    给cookie追加name: document.cookie="name="+escape("我叫钢蛋");//这里可以不写secape,这样写会更加的安全., ...

  3. Javascript 文件操作(整理版)

    Javascript 文件操作 一.功能实现核心:FileSystemObject 对象 其实,要在Javascript中实现文件操作功能,主要就是依靠FileSystemobject对象.在详细介绍 ...

  4. 学习笔记: JavaScript/JQuery 的cookie操作

    转自:http://blog.csdn.net/barryhappy/archive/2011/04/27/6367994.aspx cookie是网页存储到用户硬盘上的一小段信息.最常见的作用是判断 ...

  5. JavaScript实现评论点赞功能

    通过分析评论功能的逻辑关系,学会如何使用JavaScript实现评论.回复.点赞等各种功能 1.学会JavaScript处理日期和时间. 2.掌握Dom操作中的添加/删除子节点方法. 3.使用setT ...

  6. 【Selenium04篇】python+selenium实现Web自动化:文件上传,Cookie操作,调用 JavaScript,窗口截图

    一.前言 最近问我自动化的人确实有点多,个人突发奇想:想从0开始讲解python+selenium实现Web自动化测试,请关注博客持续更新! 这是python+selenium实现Web自动化第四篇博 ...

  7. jquery.cookie.js 操作cookie实现记住密码功能的实现代码

    jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下.   复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...

  8. PHP与JavaScript下的Cookie操作

    下面的例子列出几种情形交互场景,列出JS和php交互的方法.总结下,以免日后再为cookie问题困扰. setcookie.php getcookie.php 总结: php用自身函数读取php 的c ...

  9. JavaScript能否操作cookie和session?

    JavaScript能否操作cookie和session? 解答:JavaScript可以操作cookie,但是不能操作session

随机推荐

  1. Hive 打开调试模式

    编程过程中发现错误,无法看到具体的错误信息,网上搜了下,按照下面的方法启动Hive Shell就可以打开调试(注意:此方法只对本次回话有效): hive --hiveconf hive.root.lo ...

  2. 微信小程序之顶部固定和底部固定

    顶部固定 <view style="position:fixed;top:0;"> ...... </view> 底部固定 <view style=& ...

  3. Android Studio 1.1.0 “关联源码” 或者“导入源码” ,又或者插件包

    其实这博文是废话!为什么呢? 1.如果自己的SDK没有更新相应当前操作版本的source的话,相应的v4,v7等等的源码都不会自动导入的. 其实Android Studio自身就已经会去检测你当前SD ...

  4. python进程间通信 实例

    python实现进程间通信简单实例 实例讲解了python实现两个程序之间通信的方法,具体方法:该实例采用socket实现,与socket网络编程不一样的是socket.socket(socket.A ...

  5. 不错位的java .class 反编译工具推荐

    我们经常会反编译看一些class文件,但是反编译出来的文件里面会有很多杂乱的东西 一直以来都是用的idea来反编译的,只要把class文件往里面一拖就行了 这么用没问题,用来看看源码什么的都OK 但是 ...

  6. Push UIViewController with different orientation to previous

    转自:http://stackoverflow.com/questions/6695837/push-uiviewcontroller-with-different-orientation-to-pr ...

  7. linux系统查毒软件ClamAV

    安装方法: 长久使用参考: http://www.cnblogs.com/kerrycode/archive/2015/08/24/4754820.html#undefined 临时使用参考: htt ...

  8. django rest_framework入门二-序列化

    在前一节中,我们已经粗略地介绍了rest_framework的作用之一序列化,下面我们将详细探究序列化的使用. 1.新建一个app snippets python manage.py startapp ...

  9. LeetCode: Best Time to Buy and Sell Stock II 解题报告

    Best Time to Buy and Sell Stock IIQuestion SolutionSay you have an array for which the ith element i ...

  10. 玩转shell命令行

    移动光标快捷键 ctrl+f 向前移动一个字符 ctrl+b 向后移动一个字符 ctrl+a 移动到当前行首home ctrl+e 移动到当前行尾end alt+f 向前移动一个单词 alt+b 向后 ...