LocalStorage单击添加/删除类

Question

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"

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.

 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); }); 

 *{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;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="kleur"> <div class="c-ori">1</div> <div class="c-wit">2</div> <div class="c-rood">3</div> </div> 

Answer 1

You should also use removeClass to remove previous classname, and addClass to add your new classname.

Also, add the classname in the css file and add the relevant background. For more information see removeClass addClass

Answer 2

Maybe something like this? It will overwrite the class name of the body element

if (localStorage.getItem("background") != null) {
  getColour = localStorage.background;
  document.body.className = getColour;
}

$(".c-ori").click(function () {
  setColour = "c-ori"
  document.body.className = setColour
  localStorage.setItem("background", setColour);
});