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. PHP规范PSR0和PSR4的理解

    一.PSR0简介 下文描述了若要使用一个通用的自动加载器(autoloader),你所需要遵守的规范: 一个完全标准的命名空间(namespace)和类(class)的结构是这样的:\<Vend ...

  2. Mac使用技巧总结-如何独立设置Mac触摸板方向和鼠标滚轮方向？

    Mac使用技巧总结 如何独立设置Mac触摸板方向和鼠标滚轮方向? 苹果Macbook的使用者都知道,Mac自带的触控板非常好用,不仅支持多手势操控,而且手感极佳,使用流畅. 但是如果对鼠标的焦距有高有 ...

  3. CentOS中安装JAVA环境

    好消息, 程序员专用早餐机.和掌柜说 ideaam,可以节省20元. 点击链接   或復·制这段描述￥k3MbbVKccMU￥后到淘♂寳♀ 一般情况下,我们都要将linux自带的OPENJDK卸载掉, ...

  4. grafana 邮件报警

    https://my.oschina.net/go4it/blog/830714 grafana   教程 http://download.csdn.net/detail/shuijinglei198 ...

  5. 【Android教程】Android用户系统管理

    原文:http://android.eoe.cn/topic/android_sdk Android用户迷恋于在自己的设备上安装他们所喜欢的应用.让您的应用受用户喜欢的一种方法就是让它个性化.Andr ...

  6. 设计模式-单例模式（Singleton Pattren）（饿汉模式和懒汉模式）

    单例模式(Singleton Pattren):确保一个类在整个应用中只有一个实例,并提供一个全局访问点. 实现要点: 1. 私有化构造方法 2. 类的实例在类初始化的时候创建 3. 提供一个类方法, ...

  7. Atitit 通用接口的设计与实现attilax 总结

    Atitit 通用接口的设计与实现attilax 总结 1.1. 现存的情况1 1.2. 接口返回类型,与返回序列化格式1 1.3. 异常传递 代替返回值模式1 1.4. 通用接口原理1 1.5. A ...

  8. [na]tcpdump非常实用的抓包实例

    基本语法篇 常用应用: 过滤物理口 过滤某个port/ip/mac 过滤协议 显示ip/mac/port不解析等 过滤mac tcpdump -i eth0 ether host 24:DF:6A:F ...

  9. 【Unity】2.10 利用VS2015编辑Unity的C#脚本

    分类:Unity.C#.VS2015 创建日期:2016-03-31 一.简介 用VS2015编辑C#脚本时,如果让其"显示所有文件",就会看到VS2015解决方案资源管理器中项目 ...

  10. DIOCP开源项目-定义自己要发送的数据结构(MyObject)

    印象中网络程序都是sendBuffer和recvBuffer来发送数据和接收数据,本次Demo演示如何定义定义一个自己的对象,然后我们按照OO的思想直接进行对象的发送和接收,先上个流程图. 下面是客户 ...