ページが閉じられた後でもボタンの属性を保存する

ボタンをクリックすると、ユーザーがボタンをクリックすると無効になるボタンが表示されます。ただし、ページがリフレッシュされると、ボタンは再び使用可能になります。ユーザーがページを更新/閉じた後でもボタンを無効にするにはどうすればよいですか？ページが閉じられた後でもボタンの属性を保存する

これは私の現在のコードhttps://hastebin.com/oyolabefal.xml

出典

2017-10-22 The Wrong Teemo

に役立ちます願っています。したがって、リロード時にボタンを無効にすることができます。ビジネスニーズに応じてローカルストレージまたはクッキーを使用できます。 – Sathibabu

私はあなたがそれの前に投票を持っているかどうかを格納するテーブルを持っているべきだと思います。 Webページを更新/閉じると、ローカルストレージは空になります。 –

コードを[mcve]という形で質問自体に入れてください。 – LW001

あなたはlocal storageを使用することができます。しかし、それでも1つのブラウザに制限されます。例えば、ユーザーがchromeから投票し、Firefoxでページを試しても、それは動作しません。また、ユーザーがストレージをクリアしても機能しません。

setキーとreadを使用して、その特定のボタンをJS経由で無効にすることができます。

ブラウザ間でこの機能を制御したい場合は、ローカルストレージのみaktuell Divice上にあるDB

出典

2017-10-22 09:06:55

にこの情報を保存する必要があります。あなたがのlocalStorageをチェックすると、それが値を持っているときにvottingないようにする必要があり

<html> 
<head> 
<script language="javascript"> 
function clickCounter() { 
    if(typeof(Storage) !== "undefined") { 
     if (!localStorage.clickcount) { 
      localStorage.clickcount = 1; 
     }else{ 
      document.getElementById("voted").innerHTML ="You have allreay Voted"; //show message you have allreay Voted 
     } 
     document.getElementById("result").innerHTML = localStorage.clickcount; 
    } else { 
     document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage..."; 
    } 
} 
    </script> 
<style> 
    .counter { 
     position: absolute; 
     border: 1.5px solid #50915F; 
     width: 350px; 
     height: 200px; 
     background: white; 
     top: 30%; 
     left: 40%; 

     } 

    .keke{ 
     position: absolute; 
     border-width: 0; 
     background: transparent; 
     top: 30%; 
     left: 44%; 
     text-align: center; 
     margin: auto; 
     font-size: 45px; 
     } 
    .gbutton { 
     position: absolute; 
     top: 60%; 
     left:37%; 
     } 
      .button { 
     background-color: #50915F; 
     border: none; 
     color: black; 
     padding: 15px 32px; 
     text-align: center; 
     text-decoration: none; 
     display: inline-block; 
     font-size: 16px; 
     margin: 4px 2px; 
     cursor: pointer; 
     -webkit-transition-duration: 0.4s; 
     transition-duration: 0.4s; 
    } 

    .button2:hover { 
     box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19); 
    } 
</style> 
</head> 
<body> 
    <div class="counter"> 
     <center><font face="Lato" id="voted"> Vote here</font></center><br> 
     <div id="result" class="keke"></div> 
     <button class="button button2 gbutton" onclick="clickCounter();this.disabled=true" type="button">Vote</button> 
    </div> 
</body> 
</html>

出典

2017-10-22 09:08:48

はいのlocalStorageは、サーバ側で使用すると、DBに状態を保存し、条件付きでボタンを表示することができ、作業を行うための最善の選択肢の一つです。例えば

if x.present? 
<button disabled > click </button> 
else 
<button> click </button> 
end

私は間違っていないよ場合は、ユーザーのクリックを永続化する必要がある期待している

出典

2017-10-22 09:12:05 Apoorv

ページが閉じられた後でもボタンの属性を保存する

答えて

関連する問題