Storing button attribute even after the page got closed/refreshed

Question

I have a vote counter with a button that will get disabled once the user has clicked on it. However, when the page is getting refreshed, the button will become available again. How do i make the button remain disabled even after the user refreshed/closed the page?

this is my current code https://hastebin.com/oyolabefal.xml

If I am not wrong, you are expecting the user's click should be persisted. So, on reload you can disable the button. You can use local storage or cookie based on your business needs. — Sathibabu, Oct 22 '17 at 09:07
I think you should have a table to store if user has vote before or not on it. Local storage will get empty after refreshing/closing web page. — , Oct 22 '17 at 09:07
Please put the code into the question itself in the form of a [mcve]. — LW001, Oct 22 '17 at 09:26

score 1 · Answer 1 · answered Oct 22 '17 at 09:06

You can use local storage. But it will still limit to one browser. For eg, if user voted from chrome and try your page in Firefox, it will not work. Also, it will not work if user clear the storage.

You can set a key and read that to disable that particular button via JS.

If you want to control this feature across browser, you might need to save this info in DB

ferhado · Answer 2 · 2017-10-22T09:14:19.240

The local storage is only on aktuell Divice. When you check localStorage, when it has value you must prevent 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>

score 0 · Answer 3 · answered Oct 22 '17 at 09:12

yes localstorage is one of the best option to do the task, on the server side you can save the status in db and show the button conditionally.

for example

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

hope that helps

Storing button attribute even after the page got closed/refreshed

3 Answers3