storing disabled button in local storage

Question

How do I code for a button that, when clicked, changes color (or disables it) and stays that way for all the next instances of that page?

This is how it currently looks like

function res1() {
var bgcolor = document.getElementById("hideshow").style.background = "gray";
var fontcolor = document.getElementById("hideshow").style.color = "white";
var text = document.getElementById("hideshow").innerHTML = "Reserved";

localStorage.setItem("hideshow").style.background.value = bgcolor;
localStorage.setItem("hideshow").style.color.value = fontcolor;
localStorage.setItem("hideshow").innerHTML.value = text;

document.getElementById("hideshow").style.background = bgcolor;
document.getElementById("hideshow").style.color = fontcolor;
document.getElementById("hideshow").innerHTML = text;
}

score 0 · Answer 1 · answered Jan 01 '17 at 23:27

localStorage can only store strings, so the idea is to store the state of each button you want to persist. To do this we can create a few simple functions:

Save the state of a button to localStorage
Retrieve the state of each button on load and set its state

// Create a variable storing the buttons
const btns = document.querySelectorAll('.btn');

// Retrieve the button state from localStorage and each
// button's state
const getBtnState = function (btns) {
  [].forEach.call(btns, function(btn) {
    if (window.localStorage.getItem(btn.id) == 'disabled') {
      btn.disabled = true
    }
  });
};

// Add an event listener to each button to
// disable and store the button's state on click
[].forEach.call(btns, function(btn) {
   btn.addEventListener('click', function (e) {
     btn.disabled = true
     window.localStorage.setItem(btn.id, 'disabled')
   })
});

// Call the getBtnState function to set the initial state
// of each button
getBtnState(btns);

<button id="btn1" class="btn">Button 1</button>
<button id="btn2" class="btn">Button 2</button>
<button id="btn3" class="btn">Button 3</button>
<button id="btn4" class="btn">Button 4</button>

This demo will not work on Stackoverflow due to the demo being 'sandboxed'. For a working demo head on over to this Codepen demo.

score 0 · Answer 2 · answered Jan 01 '17 at 23:32

Since your styles are hard-coded anyway, there is no need to also store them in localStorage.

Here's a simpler implementation:

document.onload = function(){
    if (localStorage.getItem("buttonHasBeenClicked")){
        // make the button grey and change text etc. here
        // also, you said you wanted to disable it?
        document.getElementById("hideshow").disabled = 'disabled';
    }
    document.getElementById("hideshow").addEventListener('click', function(e){
        localStorage.setItem("buttonHasBeenClicked",true);
    }
};

A side note on what you had:

localStorage.setItem("hideshow").style.background.value = bgcolor;

This will break because setItem doesn't return anything. You pass in an object you want to store as the second parameter (i'm passing in the value true, above)

storing disabled button in local storage

2 Answers2