Получение флажка id из локального хранилища для JQuery

Question

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

Вот JSFiddle

Код:

// this code saves the marked checkbox in the local storage 
 

 
$('.required-option').on('click', function() { 
 
    var fav, favs = []; 
 
    $('.required-option').each(function() { // run through each of the checkboxes 
 
    fav = { 
 
     id: $(this).attr('id'), 
 
     value: $(this).prop('checked') 
 
    }; 
 
    if (fav.value === true) { 
 
     favs.push(fav.id); 
 
    } 
 
    }); 
 
    localStorage.setItem("checkbox", JSON.stringify(favs)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" class="required-option" id="like1" /> 
 
<input type="checkbox" class="required-option" id="like2" /> 
 
<input type="checkbox" class="required-option" id="like3" /> 
 
<input type="checkbox" class="required-option" id="like4" /> 
 
<input type="checkbox" class="required-option" id="like5" /> 
 
<input type="checkbox" class="required-option" id="like6" /> 
 
<input type="checkbox" class="required-option" id="like7" /> 
 
<input type="checkbox" class="required-option" id="like8" /> 
 
<input type="checkbox" class="required-option" id="like9" />

Answer 1

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

var elems = $('.required-option'); 
elems.on('click', function() { 
    //Iterate checked checkboxes and store selector like #xxx 
    var checkedCheckboxes = elems.filter(':checked').map(function() { 
     return '#' + this.id; 
    }).get().join(','); 
    localStorage.setItem("checkedCheckboxes", checkedCheckboxes); 
}); 

var checkedCheckboxesselector = localStorage.getItem("checkedCheckboxes"); 
if (!!checkedCheckboxesselector) { 
    $(checkedCheckboxesselector).prop('checked', true); 
} 

Updated fiddle

Answer 2

Используйте localStorage.getItem(), чтобы получить детали и JSON.parse() разобрать строку JS объект (массив в нашем случае) на документ готов к заполнению страницы

$.each(JSON.parse(localStorage.getItem("checkbox")),function(i,v){ 
$('#'+v).attr('checked','checked'); //or as stated in the comments .prop('checked', true) 
}); 

Answer 3

Простейший способ достижения этого - просто сохранить атрибуты отмеченных отметок id. Хранение невыбранных элементов немного избыточно. Попробуйте это:

$('.required-option').on('click', function() { 
    var favs = $('.required-option:checked').map(function() { 
     return this.id; 
    }).get(); 
    localStorage.setItem("checkbox", JSON.stringify(favs)); 
}) 

JSON.parse(localStorage.getItem("checkbox") || '[]').forEach(function(id) { 
    $('#' + id).prop('checked', true); 
}) 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="checkbox" class="required-option" id="like1" /> 
<input type="checkbox" class="required-option" id="like2" /> 
<input type="checkbox" class="required-option" id="like3" /> 
<input type="checkbox" class="required-option" id="like4" /> 
<input type="checkbox" class="required-option" id="like5" /> 
<input type="checkbox" class="required-option" id="like6" /> 
<input type="checkbox" class="required-option" id="like7" /> 
<input type="checkbox" class="required-option" id="like8" /> 
<input type="checkbox" class="required-option" id="like9" /> 

Updated fiddle