创建一个 Cookie 以不再在投票中投票

Creating a Cookie to not vote again in a poll

我使用 jQuery AJAX 和 JSON 创建了一个简单的 [投票表]。我想知道如何创建一个 Cookie,以便用户不能多次投票。以下是我的代码。

我是 Cookie 和 jQuery 的新手。请告诉我如何完成我的任务。

JavaScript

<script>
$(document).ready(function(){

    $("#poll").click(function(){
        var count = '';
        if (document.getElementById("vote1").checked) {
            count = 0;
        }
        if (document.getElementById("vote2").checked) {
            count = 1;
        }
        var jsonV= { "vote": count };

        $.ajax({
          type  : "POST",
          url   : "poll_vote.php",
          data  : jsonV,
          dataType: "json",
              success : function ( responseText ){
                console.log("Is working " + responseText);
                 $("#result").html( responseText.vote );
              },
              complete : function(){
                  $("#poll").slideUp();
              },
              error : function( error,responseText ){
                // alert("Server not Responding. Sorry for the inconvenience caused. Please Try again Later");
                console.log( error );
                $("#result").html( error + responseText );
                alert( count );
              }
        });
    });
});
</script>

PHP

<?php

$vote = $_REQUEST['vote'];
$filename = "poll_result.txt";
$content = file($filename);
// $decode = json_decode($encode);
$array = explode("||", $content[0]);
$male = $array[0];
$female = $array[1];

if ($vote == '0') {
  $male = $male + 1;
}
if ($vote == '1') {
  $female = $female + 1;
}

$insertvote = $male."||".$female;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);

$table =  (
    "<h2>Results:</h2>
        <table>
        <tr>
            <td> Male :</td>
            <td>
            <img src='poll.gif'
            width= ".(100*round($male/($female+$male),2)).
            "height='20'>".
            (100*round($male/($female+$male),2))." %"  .
            "
             </td>
         </tr>
         <tr>
             <td> Female :</td>
             <td>
             <img src='poll.gif'
             width=". (100*round($female/($female+$male),2)) .
            "
             height='20'>".
             (100*round($female/($female+$male),2))." %" ."

             </td>
         </tr>
     </table>"
 );
$list  = array('vote' => $table);
$encode = json_encode($list);
echo $encode;
?>

HTML

<div id= "poll">
    <h3> What is your Gender? </h3>
    <form>
        Male : 
        <input type ="radio" name ="vote"  id="vote1" >
        <br>
        Female :
        <input type ="radio" name ="vote"  id="vote2" >
    </form>
</div>

由于您似乎正在使用 PHP,您将能够实施 cookie 以防止在现有脚本中进行多次投票。

在PHP中设置cookie的语法如下:

setcookie("cookiename", "cookiedata", cookietime, "cookielocation");

其中"cookiename"是cookie的名称,例如"voted","cookiedata"是cookie中存储的数据-例如"yes"。 "cookielocation" 是 cookie 在用户浏览器缓存中的存储位置。除非您知道自己在做什么,否则只需将其设置为“/”即可。

Cookietime 是指 cookie 在浏览器自动删除之前在用户系统中停留的时间。请注意,这不会阻止用户删除 cookie。为了简单起见,我通常将时间设置如下:

time()+60*60*24*days

其中 days 是 cookie 在用户系统中的停留时间(当然是以天为单位)。

要检索 cookie 的值以便您能够对其执行逻辑,请尝试使用:

if(isset($_COOKIE['cookiename'])) {
   $valueOfCookie = $_COOKIE['cookiename'];
}

在尝试检索值之前,请务必使用 if(isset()) 来确保已设置 cookie。

使用这些函数,当用户提交表单时,您的逻辑可能看起来像这样:

  1. 检查是否设置了投票 cookie
  2. 如果是,打印错误信息,否则:
  3. 继续处理表单数据,并设置投票cookie

但是,附带说明一下,如果您担心用户可能会删除他们的 cookie,以便他们可以再次投票,我可能建议您不要使用 cookie,而是将用户的IP地址存储在服务器端,如果IP地址已经投票,则拒绝他们的投票权限。

您可能希望在用户投票时设置一个 cookie,并在提交投票时在 PHP 中检查该 cookie。如果已设置 cookie,则应丢弃投票。

例如,仅使用 PHP,它可能看起来像这样:

if (!isset($_COOKIE['has_voted'])) {
    // normal vote submission code goes here
    // ...
    // then we set a cookie to expire in 30 days
    setcookie('has_voted', '1', mktime().time()+60*60*24*30);
} else {
    // cookie already exists, user has already voted on this machine
    // do not count the vote, flag an error to the user
}

值得注意的是,有一些方法可以解决这个问题——用户可以轻松地手动删除 cookie。在这种情况下,您还可以存储已经投票的用户的 IP 地址,但这可能会在共享机器和网络后面的多台机器上出现问题。

您可以使用 sessionStorage 执行此操作,仅使用 JS:

<script>
$(document).ready(function(){
    $("#poll").click(function(){
        var count = '';
        if (document.getElementById("vote1").checked) {
            count = 0;
        }
        if (document.getElementById("vote2").checked) {
            count = 1;
        }

        var jsonV= { "vote": count };

        if ( sessionStorage.getItem( 'voted' ) == 'true' ) {
            alert('You have already voted!');
        }else if ( sessionStorage.getItem( 'voted' ) == null ){
            $.ajax({
              type  : "POST",
              url   : "poll_vote.php",
              data  : jsonV,
              dataType: "json",
                  success : function ( responseText ){
                    console.log("It's working" + responseText);
                     $("#result").html( responseText.vote );
                  },
                  complete : function(){
                      $("#poll").slideUp();
                      sessionStorage.setItem('voted', 'true');
                  },
                  error : function( error,responseText ){
                    // alert("Server not Responding. Sorry for the inconvenience caused. Please Try again Later");
                    console.log( error );
                    $("#result").html( error + responseText );
                    alert( count );
                  }
            });
        }
    });
});
</script>
  • 我在这里所做的是在 complete 您的 ajax 调用的回调,因此一旦它完成 项目 'voted' 将被设置。
  • 然后我将 ajax 调用包装在 if 条件中,该条件检查 存储项的值,如果已设置则不允许 你投票(而不是提出一个alert

注意 如果您希望该项目持续更长时间,因为当浏览器关闭时 sessionStorage 被清除,而 localStorge window将持续到用户清除他们的 cookies/浏览数据。


这里有一个小片段,您可以用来清除存储以进行测试:

$('#clear').click(function(){
    console.log(sessionStorage.getItem( 'voted' ));
    sessionStorage.removeItem('voted');
    console.log(sessionStorage.getItem( 'voted' ));
});

您将需要随附的 HTML:

<p id="clear">clear</p>