Localstorage selection Javascript - save style CSS

问题

I want to make a drop down menu with three selections that change the color of the nav and saves it in local storage, when you update the page the color you picked is still there.

I want to do this in Javascript and not with any help from jQuery.

Here is my HTML:

<nav id="box">
   <select>
      <option value="grey" id="grey">Grey</option>
      <option value="black" id="black">Black</option>
      <option value="green" id="green">Green</option>
   </select>
</nav>

Here is my CSS:

#box {
    height:50px;
    padding: 5px;
    margin:0 auto;
    font-size:25px;
    text-align: center; 
}
.grey {
    background-color: rgba(0, 0, 0, 0.5);
    border-color: #FFF;
}
.black {
    background-color: rgba(0, 0, 0, 0.9);
    color: #FFF;
}
.green {
    background-color: rgba(33.3, 46.7, 7.8);
    border-color: #000;
}

Here is my JS:

function setUp() {
   document.getElementById("grey").onclick = setSuccessStyle;
   document.getElementById("black").onclick = setErrorStyle;
   document.getElementById("green").onclick = setInfoStyle;
}

function setSuccessStyle() {
   var messageBox = document.getElementById("box");
   messageBox.className = "grey";   
}

function setErrorStyle() {
   var messageBox = document.getElementById("box");
   messageBox.className = "black";
}

function setInfoStyle() {
   var messageBox = document.getElementById("box");
   messageBox.className = "green";
}

I know that I'm not supposed to have onclick as the "action" but I have no idea how to solve this.

回答1:

You have couple of issues in your code.

Basically you need to use onchange on the select but not click on the option.

After the user pick a color, you store it in the localStorage. When the page load, you read it from the localStorage and set the class with it value.

This snippet will not work because of security reason so you can see the result in this bin

function setUp(sel) {
  var messageBox = document.getElementById("box");
  messageBox.className = sel.value;
  localStorage.setItem('color', sel.value);
}

var selectElm = document.querySelector('select');
selectElm.value = localStorage.getItem('color') || selectElm.querySelector('option').getAttribute('value');
selectElm.onchange();

#box{
  height:50px;
  padding: 5px;
  margin:0 auto;
  font-size:25px;
  text-align: center; 
}
.grey {
  background-color: rgba(0, 0, 0, 0.5);
  border-color: #FFF;
}
.black {
  background-color: rgba(0, 0, 0, 0.9);
  color: #FFF;
}
.green {
  background-color: rgba(0, 72, 3, 0.47);
  border-color: #000;
}

<nav id="box">
  <select onchange="setUp(this)">
    <option value="grey">Grey</option>
    <option value="black">Black</option>
    <option value="green">Green</option>
  </select>
</nav>

回答2:

Here's an answer that uses your HTML and CSS as-is. Just replace your setUp function with this and make sure to call setUp on page load.

function setUp() {
    var box = document.getElementById("box").getElementsByTagName('select')[0];
    box.onchange = function(){
            switch(this.value){
                case 'grey':
                    setSuccessStyle();
                    break;
                case 'black':
                    setErrorStyle();
                    break;
                case 'green':
                default:
                    setInfoStyle();
                    break;
            }
            //localStorage part
            localStorage.setItem("box",this.value);     //'box' can be any string key you want
        };
    //load the old value from localStorage
    var selection = localStorage.getItem("box");
    if(selection !== null){
        var items = box.getElementsByTagName("option");
        for(var i=0; i<items.length; i++){
            if(items[i].value == selection){
                box.selectedIndex = i;
                break;
            }
        }
    }
}

回答3:

function setUp() {
  document.getElementById("select").addEventListener("change", onChangeSelect);
}

function onChangeSelect() {
  var value = document.getElementById("select").value;
  console.log(value);
  switch (value) {
    case "grey":
      setSuccessStyle();
      break;
    case "black":
      setErrorStyle();
      break;
    case "green":
      setInfoStyle();
      break;
  }
}

function setSuccessStyle() {
  var messageBox = document.getElementById("box");
  messageBox.className = "grey"; 
}

function setErrorStyle() {
  var messageBox = document.getElementById("box");
  messageBox.className = "black";
}

function setInfoStyle() {
  var messageBox = document.getElementById("box");
  messageBox.className = "green";
}

setUp();

#box{
  height:50px;
  padding: 5px;
  margin:0 auto;
  font-size:25px;
  text-align: center; 
}
.grey {
  background-color: rgba(0, 0, 0, 0.5);
  border-color: #FFF;
}
.black {
  background-color: rgba(0, 0, 0, 0.9);
  color: #FFF;
}
.green {
  background-color: rgba(33.3, 46.7, 7.8);
  border-color: #000;
}

<nav id="box">
  <select id="select">
    <option value="grey" id="grey">Grey</option>
    <option value="black" id="black">Black</option>
    <option value="green" id="green">Green</option>
  </select>
</nav>

来源：https://stackoverflow.com/questions/35581933/localstorage-selection-javascript-save-style-css