Контролируйте входные флажки с помощью localStorage

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

Посмотреть:

 <div>
    <label><input type="checkbox"value="<%=obj.id%>" name="selected" class="select_class"></label>
 </div>

JS

  $("#save_button").click(function(){
    var selecteditems = [];

      if (!$("input[name='selected']:checked").is(":checked")) {
          localStorage.removeItem('chx');
         //if checkboxs are not checked, remove the setItem
        }
      else{
        $("input[name='selected']:checked").each(function(){
        var checked = $(this).val();
        if(checked){
          selecteditems.push(checked);

        localStorage.setItem('chx', JSON.stringify(selecteditems));
        var localcheckdata =JSON.parse(localStorage.getItem('chx'));  
        }

        $.each($("input[name='selected']"), function(){
         localcheckdata.push($(this).val());
       });

Я буду очень благодарен за вашу помощь, и если вы не возражаете, не могли бы вы сообщить мне, в чем проблема?

javascript,local-storage,

0

Ответов: 1

0 принят

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

Затем, как только страница загружается, вы должны повторить значения, хранящиеся в локальном хранилище, а затем получить обновление dom

В вашем коде были неизвестные переменные, поэтому этот пример приведен ниже:

var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {},
    $checkboxes = $("#checkbox-container :checkbox");

// on save button clicked
$("#save_button").click(function(){
  $checkboxes.each(function(){
    checkboxValues[this.id] = this.checked;
  });

    localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));

});


// On page load
$.each(checkboxValues, function(key, value) {
  $("#" + key).prop('checked', value);
});
<div id="checkbox-container">
  <div>
    <label for="option1">Option 1</label>
    <input type="checkbox" id="option1">
  </div>
  <div>
    <label for="option2">Option 2</label>
    <input type="checkbox" id="option2">
  </div>
  <div>
    <label for="option3">Option 3</label>
    <input type="checkbox" id="option3">
  </div>
</div>

JavaScript, локальное хранение,
Похожие вопросы
Яндекс.Метрика