Как сохранить состояние чекбокса в localStorage?

124
30 сентября 2019, 01:10

Есть код который добавляет значение для чекбокса в localstorage

var checked = JSON.parse(localStorage.getItem('checkbox1zaal1'));
if (checked == true) {
    document.getElementById("checkbox1zaal1").checked = true;
} 
function save(){
    var checkbox = document.querySelector('input');
    localStorage.setItem('checkbox1zaal1', checkbox.checked);
}
$('.check').click(
function() {
save();
}
)

Проблема в том что код работает только для одной айдишника, соответсвенно один ключ для одного чекбокса. Возможно ли как то преобразовать код для того что бы значение для каждого чекаута хранилось отдельно в одном ключе?

https://jsfiddle.net/MarkTok/8zdyps5h/23/

Answer 1

В примере ниже я использовал идентификаторы элементов, в качестве ключей для localStorage

https://jsfiddle.net/mLz24gc6/7/

смотрите fiddle, т.к. в сниппете localStorage отключен

[].slice.call(document.querySelectorAll(".check")).forEach(function(el) { 
  el.onchange = function() { 
  	 localStorage.setItem(el.id, el.checked); 
  }; 
  if (localStorage.getItem(el.id) === "true") { 
  	el.checked = true; 
  } 
})
<input type="checkbox" class='check' id="checkbox1zaal1"> 
<input type="checkbox" class='check' id="checkbox1zaal2">

READ ALSO
Плавная прокрутка якорей
javascript

Плавная прокрутка якорей

Всем привет, Я использую этот простенький код для плавного скролла по якорям и всё это чудесно работает:

 106
Неправильное сложение цифр всех input
javascript

Неправильное сложение цифр всех input

Здраствуйте! У меня такое заданиеНа странице есть несколько form, в form несколько input, в input числа

 113
Проблема с setInterval
javascript

Проблема с setInterval

 108
jQuery. Дубликаты значений
javascript

jQuery. Дубликаты значений

Трудность в следующем: берется шаблон (тег template) из html файлаПри нажатии по кнопке создается разметка из шаблона в html файле, на котором навешивается...

 90