Search code examples
javascripthtmldomlocal-storagegetelementbyid

how do I save a button that has been clicked to local storage?

I have x amount of buttons, I made it so when a button is clicked it turns green or clicked again it will go back to its default grey. its a collection list to keep track of things acquired vs. not. so my problem is that I can't figure out how to tie in this project with local storage so that when I refresh the page the ones that have clicked green stay. I'm thinking something with using the bId array but I just cant seem to figure it out. here is my code so far

<body>
    <button id="b1">item 1</button>
    <button id="b2">item 2</button>
    <button id="b3">item 3</button>
    <button onclick="saveData()" id="Save">save</button>
    <script>
      var cList = ['#008000','#808080'];
// The butExtend object will become an array here
var butList = [];

// This object keeps track of the number of button clicks.
var ButExtend = function butObj(id) {
  this.count = 0;
  if (document.getElementById(id)) {
    document.getElementById(id).addEventListener('click',bClick,false);
  }
};

// Called on a button click
function bClick() {
  this.style.backgroundColor = cList[butList[this.id].count];
  butList[this.id].count++;
  if (butList[this.id].count >= cList.length) {
    butList[this.id].count = 0;
  }
}

window.onload = function() {
  // The list of id's for the buttons.
  var bId = ['b1','b2','b3'];
  for(x in bId) {
    butList[bId[x]] = new ButExtend(bId[x]);
  }
}
Solution

  • Here I have added saveData() function. And inside it I have added object to localStorage

    jsfiddle - run here

    Also made changed in onload by checked which elements present in localStorage and performed click on that. You can directly set color or whatever logic here.

    Also added

    • Reset - Will remove localStorage also reload to blank state.
    • Reload - Reloads page for checking localStorage working.
    <button id="b1">item 1</button>
<button id="b2">item 2</button>
<button id="b3">item 3</button>
<br><br>
<button onclick="saveData()" id="Save">Save</button>
<button onclick="resetData()">Reset</button>
<button onclick="location.reload()">Reload</button>

    var cList = ['#008000', '#808080'];
// The butExtend object will become an array here
var butList = [];

// This object keeps track of the number of button clicks.
var ButExtend = function butObj(id) {
    this.count = 0;
    if (document.getElementById(id)) {
        document.getElementById(id).addEventListener('click', bClick, false);
    }
};

// Called on a button click
function bClick() {
    this.style.backgroundColor = cList[butList[this.id].count];
    butList[this.id].count++;
    if (butList[this.id].count >= cList.length) {
        butList[this.id].count = 0;
    }
}

function saveData() {
    let butListStore = [];
    for (x in bId) {
        butListStore.push(butList[bId[x]].count);
    }
    localStorage.setItem('butList', JSON.stringify(butListStore));
}

function resetData() {
    localStorage.removeItem('butList');
    butList = [];
    location.reload();
}

var bId = ['b1', 'b2', 'b3'];
window.onload = function () {
    // The list of id's for the buttons.
    let butListStorage = localStorage.getItem('butList');
    if (butListStorage) {
        butListStorage = JSON.parse(butListStorage);
    }
    for (x in bId) {
        butList[bId[x]] = new ButExtend(bId[x]);

        if (butListStorage) {
            if (butListStorage[x] == 1) {
                window[bId[x]].click();
            }
        }
    }
}