Как я могу применить localStorage для флажка ввода? - PullRequest
Новая
       59

Как я могу применить localStorage для флажка ввода?

0 голосов
/ 02 мая 2020

Примечание: я использую только vanilla js.

В настоящее время у меня есть рабочий скрипт для добавления / удаления классов через select options, а также localStorage. Все отлично работает, см. Jsfiddle здесь .

Теперь я хочу добавить два checkbox's для выполнения аналогичным образом. Моя проблема в том, что я не уверен, как добавить флажки в мой текущий скрипт localStorage.

Вот мои checkbox's: 

<input type="checkbox" name="checkbox1" id="checkbox1" onchange="checkbox1(this)">
<input type="checkbox" name="checkbox2" id="checkbox2" onchange="checkbox2(this)">

И добавить / удалить класс при отметке / снятии флажка для флажка1: 

var checkbox = document.getElementById('checkbox1');
checkbox.addEventListener("change", checkbox1, false);

function checkbox1() {
    var isChecked = checkbox.checked;
    if (isChecked) {
        [].map.call(document.querySelectorAll('body,.nc,.tags'), function(el) {
            el.classList.add('classname');
        });
    } else {
        [].map.call(document.querySelectorAll('body,.nc,.tags'), function(el) {
            el.classList.remove('classname');
        });

    }
}

Работает нормально. Теперь мне просто нужно добавить его к localStorage.

Вот мой localStorage скрипт, который работает для моего select options (полный пример в моем jsfiddle). Как мне изменить его, чтобы он работал и для моего checkbox's? Я предполагаю, что мне нужно изменить вторую строку, чтобы проверить checkbox вместо options, но я не уверен, как. 

function selectTest(element) {
  const a = element.options[element.selectedIndex].value;
  setTest(a);
  localStorage['test'] = a;
}


function setTest(a) {
  if (a == "option1") {

    //add+remove classes here 

  }
}

(function() {

  if (localStorage['test'])
    document.getElementById("test").value = localStorage['test'];
  setTest(localStorage['test'])

})();

1 Ответ

1 голос
/ 02 мая 2020

Вот JS Fiddle, если вы просто хотите увидеть код https://jsfiddle.net/qctn08ym/44/

Идея состоит в том, что, поскольку несколько флажков могут быть отмечены, и мы должны сохранить это мы можем хранить его как массив. Обратите внимание, что вы можете хранить только строку в localStorage, поэтому вам нужно будет преобразовать массив в строку и наоборот.

При любом изменении значения флажка мы можем вызвать функцию ниже, которая установит localstorage 

function checkboxChanged(e) {
  //Get the id of all checked checkboxes and store them as array
  // You can do this in loop as well by setting common class on checkboxes
  var c = []
    if(document.getElementById('checkbox1').checked) {
    c.push('checkbox1');
  }
  if(document.getElementById('checkbox2').checked) {
    c.push('checkbox2');
  }

  localStorage['test'] = c.toString();
}

Тогда вы можете просто вызвать функцию ниже при загрузке документа 

function checkOnLocalStorage() {
  if(!localStorage['test']) return;
  var checked = localStorage['test'].split(',');
  checked.map((id) => {
    document.getElementById(id).checked=true;
  })
}
...