title: Day/Night mode - CSS + JQuery - Cookies?
body: <p>I'm testing javascript code for day/light background switch and I don't know how to do something. I'm newbie to javascript, so I'm learning new stuff. 
  <br /></p>
  
  <p><strong>So what I want to do?</strong>
  <br />When I click for example on button "Day" <em>(which change background to yellow)</em>, I want that style for yellow background stay in the code after page is refreshed. I heard something about Cookies/LocalStorage, but I don't know how to implement it for this code.
  <br /></p>
  
  <p><em>Feel free to change whole code if you know easier way to do this, but please explain why it's better or why it should be like that.</em></p>
  
  <p>Thanks in advance for your help.</p>
  
  <hr>
  
  <p><strong>Here is the code:</strong></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;body id="body"&gt;
      &lt;input type="button" onclick="day();" value="Day" /&gt;
      &lt;input type="button" onclick="night();" value="Night" /&gt;
      &lt;input type="button" onclick="reset();" value="Reset" /&gt;   
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.darkSwitch {
    background: #808080;
  }
  .lightSwitch {
    background: #ffff99;
  }
  </code></pre>
  
  <p><strong>JavaScript:</strong></p>
  
  <pre><code>function day() {
      body.className = "lightSwitch";
  };
  function night() {
      body.className = "darkSwitch";    
  };
  function reset() {
      body.className = "";
  };
  
  $(function() {
      var button = $('input[type=button]');
      button.on('click', function() {
          button.not(this).removeAttr('disabled');
          $(this).attr('disabled', '');
      });
  });
  </code></pre>