Using localstorage to save background

Question

I have a button which change background color and title color

button id="change" onclick="change()">Change background!</button>                                           

var state = true;



function change(){
         if (state){
        document.body.style.backgroundColor = "red";
        document.getElementById('title').style.color='blue';

         } else {
            document.body.style.backgroundColor = "#005fff";
            document.getElementById('title').style.color='lightgreen';
                  }
        state = !state;
}

I use state to choose between one and second option, if you have better solutions pls tell me.

I want to save the setting in localstorage(after refresh and quit i want to stay the background which was chosen).

Answer 1

U have to update the localStorage with ur own defined key, ichose bgcolor for that in the example.

Also when the script is loaded u should apply the bgcolor on the document body, asigning the value u get from the localStorage.

If no value was found, i set the background on white. this is optional of course :)

var state = true;

document.body.style.backgroundColor = localStorage.getItem('bgcolor') || 'white';

function change(){
  if (state){
    document.body.style.backgroundColor = "red";
    document.getElementById('title').style.color='blue';
    localStorage.setItem('bgcolor', 'red');

  } else {
    document.body.style.backgroundColor = "#005fff";
    document.getElementById('title').style.color='lightgreen';
    localStorage.setItem('bgcolor', '#005fff');
  }
  state = !state;
}

<h1 id="title">Title</h1>
<button id="change" onclick="change()">Change background!</button>

Answer 2

You could store the current color in local storage like this:

function change(){
  const colorOption = localStorage.getItem('colorOption');
  if (colorOption === "2"){
    document.body.style.backgroundColor = "red";
    document.getElementById('title').style.color='blue';
    localStorage.setItem('colorOption', '1');
  } else {
    document.body.style.backgroundColor = "#005fff";
    document.getElementById('title').style.color='lightgreen';
    localStorage.setItem('colorOption', '2');
  }
}