title: How to keep onclick function after page refresh
body: <p>I am new to javascript and trying to write a code where two different buttons give the page two different styles, so that you can select one design in the beginning and the site stays that way. How do I make it so that the design stays that way after refreshing the site/clicking a different page on the same site? </p>
  
  <p>I have tried sessionStorage and localStorage, but I cannot seem to get it to work.</p>
  
  <p>This is what I have so far:</p>
  
  <pre><code>function greenButton() {
   document.getElementById("container").style.backgroundColor = "white";
    document.body.style.backgroundColor = "green";
  }
   function redButton() {
    document.getElementById("container").style.backgroundColor = "black";
    document.body.style.backgroundColor = "red";
  }
  </code></pre>
  
  <p>and the html:</p>
  
  <pre><code>&lt;div class="green" onclick="greenButton()&gt;green&lt;/div&gt;
  &lt;div class="red" onclick="redButton()&gt;red&lt;/div&gt;
  
  &lt;div class="container"&gt;Content&lt;/div&gt;
  </code></pre>
  
  <p>What do I have to change/add for the selected design to be active even after refreshing/switching pages?</p>