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. Java代码通过API操作HBase的最佳实践

    HBase提供了丰富的API.这使得用Java连接HBase非常方便. 有时候大家会使用HTable table=new HTable(config,tablename);的方式来实例化一个HTabl ...

  2. HBase中多Filter查询示例

    在Hbase查询中有时需要用到多个Filter关联的查询. 代码如下: ArrayList<Filter> listForFilters = new ArrayList<Filter ...

  3. activiti Task

    UserTask ScriptTask ServiceTask MailTask ManualTask ReceiveTask BusinessRuleTask callActivity

  4. [fixed] 解决 slf4j + log4j eclipse 可以打印日志，而在云服务器上不能打印

    今天发现服务上没有打印任何日志,而log4j已经设置为了INFO 很奇怪,在eclipse中是可以打印的,也能输出到单独的日志中 后来发现原来是冲突了 把log4j注释掉即可 保留slf4j即可

  5. Atitti html5 h5 新特性attilax总结

    Atitti html5 h5 新特性attilax总结 Attilax觉得不错的新特性 3.语义Header和Footer (The Semantic Header and Footer) 8.占位 ...

  6. Atitit 软件项目系统托盘图标解决方案

    Atitit 软件项目系统托盘图标解决方案 1.1. Nodejs   node-webkit还实现了本地化的API,例如菜单栏,系统的托盘图标支持1 1.2. Java c# qt c++1 1.3 ...

  7. Xilinx FPGA 的PCIE 设计

    写在前面 近两年来和几个单位接触下来,发现PCIe还是一个比较常用的,有些难度的案例,主要是涉及面比较广,需要了解逻辑设计.高速总线.Linux和Windows的驱动设计等相关知识. 这篇文章主要针对 ...

  8. [na]ip包格式

    网络层提供的服务就是在不同网段之间转发数据包. Ip包结构 1,格式(每行4byte*5) 2,版本 V4 V6 3,首部长度 20(固定)+可变长度 ,区分服务 Win2008开始:gpedit. ...

  9. 简单修改文件名python脚本

    import os import sys path = "D:\emojis" for (path,dirs,files) in os.walk(path): for filena ...

  10. python 文件目录遍历

    递归遍历目录和文件 import os path = r'F:\PycharmProjects\basic gram\作业和习题\test' def getAllFileAndDir(path): # ...