title: LocalStorage click add / remove class
body: <p>I have a working script which adds a background color and saves it local storage. I would like to convert this into addClass.
  I don't know any JS. The issue I came to when changing .css to .addClass is it doesn't remove the previous selected background color. Getting body class="c-wit c-rood c-ori"</p>
  
  <p>Somehow it doesn't work here on Stackoverflow. But maybe someone knows how I can remove the body class and the add the new one.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>if (localStorage.getItem("background") != null) {
    getColour = localStorage.background;
    $('body').css('background', getColour);
  }
  
  $(".c-ori").click(function () {
    setColour = '#0c1534';
    localStorage.removeItem('background');
    $('body').css('background', setColour);
    localStorage.setItem("background", setColour);
  }); 
  $(".c-wit").click(function () {
    setColour = '#fff';
    localStorage.removeItem('background');
    $('body').css('background', setColour);
    localStorage.setItem("background", setColour);
  }); 
  $(".c-rood").click(function () {
    setColour = '#B71C1C';
    localStorage.removeItem('background');
    $('body').css('background', setColour);
    localStorage.setItem("background", setColour);
  }); </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{box-sizing:border-box;}
  
  html{color:#fff; height:100%;}
  body{background:#0c1534; margin:0; padding:0; height:100%; transition:0.5s;}
  
  .kleur{text-align:center; position:fixed; top:10px; left:15px; z-index:1; height:30px; color:#fff; font-size:8px; font-family:arial;}
  .kleur div{width:18px; height:18px; line-height:16px; border:1px solid #fff; margin:5px 2px; display:inline-block; cursor:pointer; border-radius:100%; }
  
  .c-ori{background:#0c1534;}
  .c-wit{background:#ffffff; color:#000;}
  .c-rood{background:#B71C1C;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="kleur"&gt; 
   &lt;div class="c-ori"&gt;1&lt;/div&gt; 
   &lt;div class="c-wit"&gt;2&lt;/div&gt; 
   &lt;div class="c-rood"&gt;3&lt;/div&gt; 
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>