javascript - How to save background color in cookie through button click?

Question

Im currently trying to learn about cookies in javascript.

My question is : I have three Button Red-Green-Blue and if i click for example on red, the background color red should be saved within a cookie so that i reload the webpage its colored red.

document.cookie ="red";
document.cookie ="green";
document.cookie ="blue";
function BackgroundRed(){
document.cookie = "background-color=red";
}


<button onClick="BackgroundRed()" style="background-color:red">Rot</button>
<button onClick="alertCookie()" style="background-color:green">Grün</button>
<button onClick="alertCookie()" style="background-color:blue">Blau</button>

Answer 1

You can do it like this:

window.addEventListener('DOMContentLoaded', function() {
  var cookieValue = getCookie('backgroundColor'),
      btns = document.querySelectorAll('.color-btn');

  if (cookieValue) {
    setBackgroundColor(cookieValue);
  }
  
  Array.from(btns).forEach(function(btn) {
    btn.addEventListener('click', function() {
      var color = this.getAttribute('data-color');
      setBackgroundColor(color);
    });
  });
});

function setBackgroundColor(color) {
  document.body.style.backgroundColor = color;
  setCookie('backgroundColor', color);
}

function getCookie(name) {
  var cookies = document.cookie.split(';'),
      cookie = cookies.find(function(str) { return str.indexOf(name + '=') === 0; });
  if (cookie) {
    return cookie.split('=')[1];
  }
  return null;
}

function setCookie(name, value) {
  document.cookie = name + '=' + value;
}

body { background: red; }
button { padding: 1em; }
[data-color="red"] { background: red; }
[data-color="blue"] { background: blue; }
[data-color="green"] { background: green; }

<button class="color-btn" data-color="red"></button>
<button class="color-btn" data-color="blue"></button>
<button class="color-btn" data-color="green"></button>