How to use localStorage in this case?

Question

I was able to make a code that changes the color of my navbar with HTML and Javascript, but when the person updates the navbar color back to normal, how can I use localStorage to save this data, until the user changes the navbar color again? Follow the button code I created:

<div class="container p-4">
  <h1>Selecione uma cor:</h1>
  <button type="button" name="button" class="btn btn-primary col-sm-4 col-md-4 col-lg-4 pt-4 mt-4" onclick="document.getElementById('navbar').style.background = 'blue'">Azul</button>
  <button type="button" name="button" class="btn btn-success col-sm-4 col-md-4 col-lg-4 pt-4 mt-4" onclick="document.getElementById('navbar').style.background = 'green'">Verde</button>
  <button type="button" name="button" class="btn btn-dark col-sm-4 col-md-4 col-lg-4 pt-4 mt-4" onclick="document.getElementById('navbar').style.background = 'black'">Preto</button>
  <button type="button" name="button" class="btn btn-warning col-sm-4 col-md-4 col-lg-4 pt-4 mt-4" onclick="document.getElementById('navbar').style.background = 'orange'">Laranja</button>
  <button type="button" name="button" class="btn btn-secondary col-sm-4 col-md-4 col-lg-4 pt-4 mt-4" onclick="document.getElementById('navbar').style.background = 'grey'">Cinza</button>
  <button type="button" name="button" class="btn btn-danger col-sm-4 col-md-4 col-lg-4 pt-4 mt-4" onclick="document.getElementById('navbar').style.background = 'red'">Vermelho</button>
</div>

My question is, how do I save this data from the button with localStorage and how do I load this data from localStorage on my system?

Answer 1

Instead of using the attribute onclick on each of the buttons, create a Event Handler onclick in all of them and put in each one a dataset with the name of the color. For example:

data-cor="blue"

This attribute will be searched in the event and saved in the localStorage. When you reload the page, just check if localStorage exists and apply the color saved in the navbar.

Buttons should look like this below. Note the attribute data-cor in each:

<button type="button" name="button" class="btn btn-primary col-sm-4 col-md-4 col-lg-4 pt-4 mt-4" data-cor="blue">Azul</button>
<button type="button" name="button" class="btn btn-success col-sm-4 col-md-4 col-lg-4 pt-4 mt-4" data-cor="green">Verde</button>
<button type="button" name="button" class="btn btn-dark col-sm-4 col-md-4 col-lg-4 pt-4 mt-4" data-cor="black">Preto</button>
<button type="button" name="button" class="btn btn-warning col-sm-4 col-md-4 col-lg-4 pt-4 mt-4" data-cor="orange">Laranja</button>
<button type="button" name="button" class="btn btn-secondary col-sm-4 col-md-4 col-lg-4 pt-4 mt-4" data-cor="grey">Cinza</button>
<button type="button" name="button" class="btn btn-danger col-sm-4 col-md-4 col-lg-4 pt-4 mt-4" data-cor="red">Vermelho</button>

And Javascript will look like this:

document.addEventListener("DOMContentLoaded", function(){
   // seleciona todos os botões pelo atributo "name"
   var bts = document.querySelectorAll("[name=button]");
   // percorre todos os botões
   for(var botao of bts){
      // cria o event handler
      botao.onclick = function(){
         // pega o valor do dataset
         var c = this.dataset.cor;
         // aplica no navbar
         document.getElementById('navbar').style.background = c;
         // salva a cor no LS
         localStorage.setItem("cor", c);
      }
   }

   // aqui verifica o localStorage
   var ls = localStorage.getItem("cor");
   if(ls){
      document.getElementById('navbar').style.background = ls;
   }

});

Obs.: the script will only work if only these buttons have the name "button". If you have another button outside that collection with the same name and it is clicked, will bug the localStorage.