How do I remember if a button has been clicked already, and remember even after page reloads using js and html?

Question

<script type="text/javascript">
    function disableButton(btn){
    document.getElementById(btn.id).disabled = true;
        alert("Button has been disabled.");
    }
</script>

<button id="btn1" onclick="disableButton(this)">$200</button>

I'm trying to remember if a button has been clicked and still be disabled, even if the user reloads the page. I'm fine using JS and jQuery, but I'd like to not use PHP. Is there a way I could use cookies and local storage to remember it?

Look into localeStorage.. https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage — Keith, Sep 01 '20 at 00:20
real solution is serverside code. But if you do not have that, it is localstorage or cookies — epascarello, Sep 01 '20 at 00:20

score 0 · Accepted Answer · edited Sep 01 '20 at 00:41

You can use Local Storage to achieve this.

<script type="text/javascript">
  window.onload = function () {
    var isButtonDisabled = localStorage.getItem('buttonDisabled') === 'true';
    if (isButtonDisabled) {
      document.getElementById('btn1').disabled = true;
    }
  };

  function disableButton(btn) {
    document.getElementById(btn.id).disabled = true;
    alert('Button has been disabled.');
    localStorage.setItem('buttonDisabled', 'true');
  }
</script>

How do I remember if a button has been clicked already, and remember even after page reloads using js and html?

1 Answers1