JavaScript cookie操作实现点赞功能

最新推荐文章于 2023-07-11 15:51:56 发布

hober.z

最新推荐文章于 2023-07-11 15:51:56 发布

阅读量4k

点赞数 5

分类专栏：前端文章标签： javascript cookie 点赞

博主原创文章，转载请注明来源。

本文链接：https://blog.csdn.net/somehow1002/article/details/78511541

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

实现一个点赞功能十分简单，主要问题在于不能重复点赞。
　　若是一个有用户的网站，可以通过数据库设计记录用户的点赞，这是可行的。
但是若是一个不记名的网站，如何记录一个用户呢？
这里有两种方法：
　　第一种是利用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");
        }
    }
}