如何在 localStorage 中切换和记住 div

Question

我想根据点击改变 div 的颜色。 然后我希望它在刷新时记住那种颜色。 最后我希望能够点击同一个 div 并将它的颜色改回原来的颜色。

我已经成功创建了第一个和第二个语句。

<div class="deurbody">
<div class="nooddeurknop btn-secondmenu">5</div>
<div class="nooddeurknop btn-secondmenu">4</div>
<div class="nooddeurknop btn-secondmenu">3</div>
<div class="nooddeurknop btn-secondmenu">2</div>
<div class="nooddeurknop btn-secondmenu">1</div>
</div>

$(".btn-secondmenu").css('background-color', localStorage.getItem(".btn-secondmenu"));
$(".btn-secondmenu").click(function () {
$(this).css('background-color', 'gray');
var status = $(".btn-secondmenu").css('background-color');
localStorage.setItem(".btn-secondmenu", status);
});

.deurbody {
    display: grid;
    grid-template-columns: 200px 80px;
    grid-template-rows: repeat(auto-fit, 60px);
    grid-row-gap: 7px;
    height:100%;

} 

.nooddeurknop:nth-child(odd) {
    display:grid;
    grid-column: 1 / 3; 
    padding-top: 5px;
    padding-bottom: 5px;
    color:white;
    background: #FF5552;
    height:auto;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    height: 50px;

}

.nooddeurknop:nth-of-type(even) {
    display:grid;
    grid-column: 1 / 3; 
    padding-top: 5px;
    padding-bottom: 5px;
    color:white;
    background: #E64C49;
    height:auto;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    height: 50px;

}

.nooddeurknop:nth-last-child(1) {
    display:grid;
    grid-column: 1 / 3; 
    padding-top: 5px;
    padding-bottom: 5px;
    color:#E64C49;
    background: #272727;
    height:auto;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    height: 50px;

}

演示：https://jsfiddle.net/pyhrfq4z/

我希望能够将灰色 div 改回红色 div。

我尝试了 jquery 的切换属性，但似乎不起作用。

Answer 1

我重构了你的代码。您的按钮几乎是重复的代码。尝试创建一个基类并附加不同的类，或者在本例中为 child 选择器。

在我看来，我不喜欢 jQuery。所以我用香草javascript重写了它。

Array.from(document.getElementsByClassName('deurbody__knop')).map(knop => {
	console.log(localStorage.getItem(knop.id));
	if (localStorage.getItem(knop.id) == 'true') knop.style.backgroundColor = 'grey';
    
	knop.addEventListener('click', () => {
  	if (knop.style.backgroundColor == 'grey'){
    	knop.removeAttribute('style');
      localStorage.setItem(knop.id, false);
    }
    else {
    	knop.style.backgroundColor = 'grey';
      localStorage.setItem(knop.id, true);
    }
  });
});

.deurbody {
    display: flex;
    flex-direction: column;
    max-width: 15em;
}

.deurbody__knop {
  padding: 1em;
  display: block;
  margin: 0.1em;
  text-align: center;
  cursor: pointer;
  color: #fff;
}

.deurbody__knop:nth-child(odd) {
  background-color: #ff5552;
}

.deurbody__knop:nth-child(even) {
  background-color: #E64C49;
}

.deurbody__knop:last-child {
  background-color: #272727;
  color: #E64C49;
}

<div class="deurbody">
  <div class="deurbody__knop" id="deurbody__knop-5">5</div>
  <div class="deurbody__knop" id="deurbody__knop-4">4</div>
  <div class="deurbody__knop" id="deurbody__knop-3">3</div>
  <div class="deurbody__knop" id="deurbody__knop-2">2</div>
  <div class="deurbody__knop" id="deurbody__knop-1">1</div>
</div>

Answer 2

我会通过切换课程并记住切换来做到这一点。所以：

.btn-secondmenu.special-color {
    background-color: gray;
}

然后

var className = "special-color";
$(".btn-secondmenu").toggleClass(className, localStorage.getItem(".btn-secondmenu") === "Y");
$(".btn-secondmenu").click(function () {
    var $this = $(this);
    $this.toggleClass(className);
    if ($this.hasClass(className)) {
        localStorage.setItem(".btn-secondmenu", "Y");
    } else {
        localStorage.removeItem(".btn-secondmenu");
    }
});

或

var className = "special-color";
$(".btn-secondmenu").toggleClass(className, localStorage.getItem(".btn-secondmenu") === "Y");
$(".btn-secondmenu").click(function () {
    var $this = $(this);
    $this.toggleClass(className);
    localStorage.setItem(".btn-secondmenu", $this.hasClass(className) ? "Y" : "N");
});

在没有设置特殊颜色的情况下，取决于你是否想拥有本地存储密钥。

Updated fiddle

---

注意：您的原始代码将相同的本地存储密钥应用于页面加载时的所有 div，所以我保留了它。如果您希望它们独立切换，您有两种选择：

• 为每个 div 使用单独的键，或者
• 为 div 使用包含标志的单个键

我倾向于拥有一些本地存储条目而不是很多，所以我倾向于后者：

var className = "special-color";
var storageName = "colorToggleState";
var colorToggleState = JSON.parse(localStorage.getItem(storageName)) || {};
$(".btn-secondmenu").addClass(function() {
    var $this = $(this);
    var index = $this.index(); // Or use some other more reliable identification of the button
    if (colorToggleState[index]) {
        return className;
    }
});
$(".btn-secondmenu").click(function () {
    var $this = $(this);
    var index = $this.index(); // Or use some other way of identifying the button
    colorToggleState[index] = !colorToggleState[index]; // `undefined` is falsy, so this works just fine
    $this.toggleClass(className, colorToggleState[index]);
    localStorage.setItem(storageName, JSON.stringify(colorToggleState));
});

Fiddle