Простая демонстрация использования объекта хранилища для отслеживания отмеченных флажков.
Здесь есть полезная фабричная функция StoreFactory Я написал, чтобы упростить дальнейшую работу с объектами хранилища - она имеет толькоочень мало методов и очень прост в использовании.
Демонстрация генерирует несколько флажков, похожих на те, которые вы показываете в вопросе - хотя я сделал жизнь проще, добавив уникальный атрибут dataset.id - этовместо этого может быть просто фактический идентификатор, но в этом вопросе может показаться, что несколько флажков будут иметь один и тот же идентификатор, который недействителен.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<script>
const StoreFactory=function( name, type ){
'use strict';
const engine = type.toLowerCase() === 'local' ? localStorage : sessionStorage;
const set=function( data ){
engine.setItem( name, JSON.stringify( data ) );
};
const get=function(){
return exists( name ) ? JSON.parse( engine.getItem( name ) ) : false;
};
const remove=function(){
engine.removeItem( name );
};
const exists=function(){
return engine.getItem( name )==null ? false : true;
};
const create=function(o={}){
set(o);
};
return Object.freeze({
set,
get,
exists,
create,
remove
});
}
document.addEventListener('DOMContentLoaded', e=>{
/* create a new storefactory object */
let store=new StoreFactory('favourites','local');
/* if the actual store does not exist, create it */
if( !store.exists() )store.create();
/* get the data stored in the local storage object */
let data = store.get();
/* assign event listeners to all the checkboxes */
Array.prototype.slice.call( document.querySelectorAll('input[type="checkbox"]') ).forEach( chk=>{
chk.addEventListener('click', e=>{
/* add checked state to store */
data[ e.target.dataset.id ]=e.target.checked;
/* save the data */
store.set( data );
})
});
/* reload stored checkboxes */
Object.keys( data ).map( k =>{
if( data[ k ]==true )document.querySelector( 'input[ type="checkbox" ][ data-id="'+k+'" ]' ).checked=true;
else {
delete data[ k ];
store.set( data );
}
})
})
</script>
<style>
form{ margin:auto; display:flex; flex-diection:row;flex-wrap:wrap; align-items:center;align-content:center;justify:content:center;font-family:cursive }
label{min-width:4rem;padding:0.5rem;margin:0.25rem;border:1px solid rgba(133,133,133,0.1);box-sizing:border-box;background:whitesmoke}
label:before{content:attr(data-value);color:blue}
</style>
</head>
<body>
<form method='post' name='checkboxes'>
<?php
/* some checkboxes - note the use of the dataset id attribute! */
for( $i=1; $i <= 50; $i++ ){
printf('<label data-value=%d><input data-id="chk_%d" type="checkbox" name="checkselect[]" value="%d" class="get_value" /></label>', $i, $i, $i );
}
?>
</form>
</body>
</html>
Насколько я могу судить, возникло несколько небольших проблем.с вашим кодом.Не будучи пользователем jQuery, я могу ошибаться, но похоже, что вы получаете ссылку на ВСЕ флажки и, независимо от отмеченного состояния, добавляете их в массив favs, который затем сохраняется в локальном объекте хранения.Само по себе это хорошо, проблема вращается вокруг fav = {id: $(this).attr('name'), value: $(this).prop('checked')}; ~, не было бы никакого способа сказать, какой флажок есть, который, если есть несколько проверенных.Каждый флажок должен иметь уникальный идентификатор (как всегда истинно ~ атрибуты идентификатора ДОЛЖНЫ быть уникальными !!)
Также кажется, что обработчик click должен быть определен после вызова $(document).ready, а затем я думаю, что удалитьвстроенный onchange="CheckedChange(this)" от каждого флажка.
Немного переписанная версия вашего кода, которая работает ... хотя я не знаю синтаксис для использования метода jQuery data ... Я думаю, что 'м близко, но это было неправильно, поэтому вместо этого использовали vanilla js.
<script>
$(document).ready(function() {
var favorites = JSON.parse( localStorage.getItem( 'favorites' ) );
$('.get_value').on('click', function() {
var favs = [];
$('.get_value').each(function(){
favs.push( {
id:$(this).attr('data-id'),
value:$(this).prop('checked')
} );
});
localStorage.setItem( 'favorites', JSON.stringify( favs ) );
});
if( favorites!==null ){
for( var i=0; i < favorites.length; i++ ) {
//$('input').data( 'id', favorites[i].id ).prop( 'checked', favorites[i].value );
if( favorites[i].value ) document.querySelector( 'input[ type="checkbox" ][ data-id="'+favorites[i].id+'" ]' ).checked=true;
}
}
});
</script>