title: Change color and set a cookie
body: <p>I'm new with Javascript and in the community of Stack Overflow. I created a script to change the style of specific elements, and this is the result:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="menu"&gt;&lt;/div&gt;
  &lt;div id="cols"&gt;
      &lt;div id="cols_1"&gt;&lt;/div&gt;
      &lt;div id="cols_2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="center"&gt;
      &lt;div id="green"&gt;Green&lt;/div&gt;
      &lt;div id="bordeaux"&gt;Bordeaux&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>document.getElementById("green").onclick = function() {colorGreen()};
  document.getElementById("bordeaux").onclick = function() {colorBordeaux()};
  function colorGreen() {
      document.getElementById("menu").style.borderBottom = "3px solid #448F44";
      document.getElementById("cols_1").style.borderTop = "3px solid #448F44";
      document.getElementById("cols_2").style.borderTop = "3px solid #448F44";
  }
  function colorBordeaux() {
      document.getElementById("menu").style.borderBottom = "3px solid #E8920C";
      document.getElementById("cols_1").style.borderTop = "3px solid #E8920C";
      document.getElementById("cols_2").style.borderTop = "3px solid #E8920C";
  }
  </code></pre>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/mshy3vrh/2/" rel="nofollow">https://jsfiddle.net/mshy3vrh/2/</a></p>
  
  <p>I read some manual on how to use cookies in JavaScript but I haven't a clear idea of how to use them. I wanted to ask if with this script, someone can show me how to set a cookie: when someone change color, clicking the span with id green or bordeaux, the information is stored and if you refresh the page remains the selected color until the user clean the browser's cache.
  That way I can have a clear idea of how they should be used.</p>
  
  <p>Best regards,
  Keaire</p>