如何让我的投票按钮存储数据库中的cookie?

时间:2016-06-17 07:17:36

标签: javascript jquery html html5 cookies

This 是我的upvote / downvote按钮。现在我希望它将cookie存储在我的网站数据库中。但我对此并不熟悉。那么有人可以帮助我吗? 目前我使用的是localstorage脚本,该脚本也被窃听并且无法正常工作。

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">   </script>
<div id="buttons">
<div type="image" class="buttonup" id="plus" style="vertical-align:middle"></div><span id="count">0</span>
<div type="image" class="buttondw" id="minus" style="vertical-align:middle"></div>

</div>

CSS:

#buttons{
width: 100%;
height: auto;}
.buttonup {
padding: 0px;
width: 50px;
height: 50px;
display: inline-block;
cursor: pointer;
margin-right: 0px;
background-image: url('http://i.imgur.com/jWPUjR9.png');
}

 #count {
 display: inline-block;
 border-radius: 0px;
 background-color: #33cc33;
 border: none;
 color: #ffffff;
 text-align: center;
 font-size: 18px;
 padding: 7px;
 width: 50px;
 margin-top: 0px;

 }

 .buttondw {
 width: 50px;
 height: 50px;
 display: inline-block;
cursor: pointer;
margin-left: 0px;
background-image: url('http://i.imgur.com/Vu6tuf9.png');
}

 .buttonup:hover {
  background-image: url("http://i.imgur.com/SFjZ9FD.png")
}
 .buttondw:hover {
 background-image: url("http://i.imgur.com/aVAeO0F.png")
}

JAVASCRIPT

var counter = 0, // Try change this what ever you want
 votePlus = counter + 1,
  voteMinus = counter - 1;

function checkIfUserVoted() {
 return localStorage.getItem("voted");
 }
 if (!localStorage.getItem("voted")) {
 localStorage.setItem("voted", counter);
 $("#count").text(counter);
 }
 $(".buttonup").click(function() {
 var vote = checkIfUserVoted() != votePlus ? votePlus : counter;
  localStorage.setItem("voted", vote);
  $(this).next().text(vote);
 });
 $(".buttondw").on('click', function () {
  var vote = checkIfUserVoted() != voteMinus ? voteMinus : counter;
  localStorage.setItem("voted", vote);
  $(this).prev().text(vote);
  });

1 个答案:

答案 0 :(得分:0)

步骤1:确保您可以通过会话识别用户(例如,他或她需要在能够投票之前登录)(如果需要,查找会话是什么)到)。

第2步:确保您可以通过唯一标识符识别用户投票的内容(在数据库中有一个问题表,假设人们对问题进行投票)。

第3步:当用户投票时,发送包含问题ID的ajax请求(查找如何使用javascript或jQuery发送帖子请求)。现在您知道用户是谁以及他投票的问题,因此您可以将此信息存储到表格中。

现在,如果您执行了所有这些操作,则可以在加载页面时识别当前用户是否已对该问题进行投票。如果用户以某种方式管理仍然投票,您需要再次检查您的服务器是否已经投票,并且只有在他尚未对指定问题进行投票时才允许他。