どうすれば同期ボタンが無効になってリフレッシュしても再び有効にならない

Question

ボタンをもう一度押す前にX時間待つ必要のあるものを作成していますが、問題は..ページを更新すると再び有効になりました。

私はこれが可能であることを知っています。

コード： JS：

 $(document).ready(function() { 
     $("#cool-down").on("click", function() { 
      $(this).attr("disabled", "disabled"); 
      startCooldown(); 
     }); 
    }); 

     function startCooldown() { 
     alert("Your cooldown period has started. You will have to wait 3 hours before trying again."); 
     //Disables magic button for 3 hours. 
     setTimeout('$("#cool-down").removeAttr("disabled")', 12400000); 
} 

と私のボタンがある：

<input type="submit" id="cool-down" class="btn btn-default" value="Magic" /> 

任意の助けいただければ幸いです。

Answer 1

ページを更新すると、再び有効になります。

理由は、リフレッシュにあるがwindowがリフレッシュ&すべての変数がリフレッシュし、タイマーと同じになります取得します。

可能な解決策は、あなたがなど、クッキーやセッションを使用して、サーバー側で通常、クライアントは、ボタンをクリックしているかどうか

を記録するために必要なクッキーを維持するか、サーバ側で

Answer 2

をボタンの状態を維持しています

あなたの場合は、ここで、localStorageを使用してトリッキーな方法でその厳格でない場合は、次の

$("#cool-down").on("click", function() { 
      var time = new Date().getTime(); 
      if (!localStorage.isClick || localStorage.isClick - time >= 12400000) { 
       localStorage.isClick = time; 
       dosomething(); 
       return; 

      } 
      donothing() 
     });