Как включить и запомнить div в localStorage

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.

Я попробовал атрибут toggle в jquery, но, похоже, это не сработало.

Answer 1

Я бы сделал это путем переключения класса и запоминания переключателя. Итак:

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

в зависимости от того, хотите ли вы иметь локальный ключ хранения, если вы не установили специальный цвет.

Обновленная скрипка

---

Примечание: Ваш исходный код применяет один и тот же ключ локального хранилища ко всем элементам 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

Answer 2

Я переделал твой код.Ваши кнопки были почти дублирующим кодом.Попробуйте создать один базовый класс и добавить разные классы или в этом случае 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>