Localstorage 选择 Javascript - 保存样式 CSS答案

【问题标题】：Localstorage selection Javascript - save style CSSLocalstorage 选择 Javascript - 保存样式 CSS
【发布时间】：2016-06-05 13:11:06
【问题描述】：

我想创建一个包含三个选项的下拉菜单，用于更改 nav 的颜色并将其保存在本地存储中，当您更新页面时，您选择的颜色仍然存在。

我想在 Javascript 中执行此操作，而不需要 jQuery 的任何帮助。

这是我的 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>

这是我的 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;
}

这是我的 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";
}

我知道我不应该将 onclick 作为“动作”，但我不知道如何解决这个问题。

【问题讨论】：

实际上，对于初学者来说，您并不想使用onclick。在这种情况下，更好的监听事件是change 事件，即onchange。此外，您需要将该侦听器附加到 select 并在触发时检查 this.value 以查看选择的颜色。

标签： javascript html css drop-down-menu local-storage

【解决方案1】：

您的代码中有几个问题。

基本上你需要在select 上使用onchange 而不是click 在option 上。

用户选择颜色后，您将其存储在localStorage 中。当页面加载时，您从localStorage 读取它并使用它设置类。

由于安全原因，此 sn-p 将不起作用，因此您可以在此 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>

【讨论】：

非常好的和紧凑的解决方案。打算发布有关编辑器不允许本地存储访问的帖子，但您已经编辑了答案。您可能会考虑将其换成答案中的简单代码块，但这取决于您的喜好。
感谢您的评论。我刚刚意识到我没有解释我的答案，所以我对其进行了编辑。在 sn-p 中您看不到 localStorage 功能，但您可以看到 change 事件的效果。另外，我喜欢使用 sn-p，因为 sn-p 中的代码更有条理。
如果您不介意我的建议，您也可以删除setUp 函数的(this) 部分。在这种情况下它是多余的，并且永远不会使用参数调用setUp，因此您可以在setUp 中使用this。如果您想快速浏览一下，我制作了 jsbin 的一个分支。我还将onchange 移出标记并移入javascript 本身。所有非常小的和唯一的建议，但我想我还是会分享它们。 jsbin.com/dozubucuna/1/edit?html,js
谢谢大家！我一直收到错误“Uncaught TypeError: Cannot set property 'value' of null”。我不知道怎么回事，它工作了一段时间，但后来我又得到了这个错误。
在此错误开始显示之前您做了什么？您是否将脚本移动到 head 标记中？

【解决方案2】：

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>

【讨论】：

【解决方案3】：

这是一个按原样使用 HTML 和 CSS 的答案。只需用此替换您的 setUp 函数，并确保在页面加载时调用 setUp。

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

【讨论】：