How to Add/Remove localStorage when checkbox is check/uncheck with jquery?

Question

I want to set/remove the localStorage with checkbox. When checked so the localStorage set and remove the current set from localStorage likewise.

 var pmode = new Array(); $('.play_mode').on('click', function() { var pval = $(this).val(); if ($(this).is(':checked')) { pmode.push(pval); localStorage.setItem('plmode', pval); //set localstorage } else { pmode.pop(); localStorage.removeItem('plmode', pval); //remove localstorage } console.log('pmode:' + pmode + '\\n plmode:' + localStorage.getItem('plmode')); })

 <label><input type="checkbox" class="play_mode" value="101" />101</label> <label><input type="checkbox" class="play_mode" value="102" />102</label> <label><input type="checkbox" class="play_mode" value="103" />103</label> <label><input type="checkbox" class="play_mode" value="104" />104</label> <label><input type="checkbox" class="play_mode" value="105" />105</label>

But the code gives me only one value from checked state of checkbox. I want it to store array like pmode from push() or pop().

Please find the working fiddle here : https://jsfiddle.net/grus6t25/

Answer 1

You could store all the checkbox values in an array or an object in localStorage. Here's an example that uses an array:

 const localStorage = { // fake local storage for demo purposes setItem: (name, value) => console.log(`You set ${name} to ${value}`) }; $('.play_mode').on('click', function() { const plmode = $.map($(".play_mode"), (item) => { return {id: item.value, checked: item.checked}; }); localStorage.setItem('plmode', JSON.stringify(plmode)); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label><input type="checkbox" class="play_mode" value="101" />101</label> <label><input type="checkbox" class="play_mode" value="102" />102</label> <label><input type="checkbox" class="play_mode" value="103" />103</label> <label><input type="checkbox" class="play_mode" value="104" />104</label> <label><input type="checkbox" class="play_mode" value="105" />105</label>

Answer 2

Whenever a checkbox is clicked, get the item from the local storage. Check if the value is an array. When a checkbox is checked and the value is not yet in the array, add it. When it is unchecked and in the array, remove it. Then update the entire array to the local storage.

 $('.play_mode').on('change', function(event) { const $checkbox = $(event.target); const value = $checkbox.val(); try { let pmode = JSON.parse(localStorage.getItem('plmode')); if (!Array.isArray(pmode)) { pmode = []; } if ($checkbox.is(':checked')) { if (!pmode.includes(value)) { pmode.push(value); } } else { const index = pmode.indexOf(value); if (index > -1) { pmode.splice(index, 1); } } localStorage.setItem('plmode', JSON.stringify(pmode)); } catch (error) { console.log(error); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label><input type="checkbox" class="play_mode" value="101" />101</label> <label><input type="checkbox" class="play_mode" value="102" />102</label> <label><input type="checkbox" class="play_mode" value="103" />103</label> <label><input type="checkbox" class="play_mode" value="104" />104</label> <label><input type="checkbox" class="play_mode" value="105" />105</label>

Answer 3

You're removing all the values from the local storage, not just the current checkbox.

Whether you're checking or unchecking, you need to store the entire array into localStorage() after updating it.

Unchecking shouldn't pop from the array -- that removes the last value, not the value of the current checkbox. You need to find the current value in the array and remove that.

 var pmode = new Array(); $('.play_mode').on('click', function() { var pval = $(this).val(); if ($(this).is(':checked')) { pmode.push(pval); } else { var index = pmode.indexOf(pval); if (index != -1) { pmode.splice(index, 1); } } localStorage.setItem('plmode', JSON.stringify(pval)); console.log('pmode:' + pmode + '\\n plmode:' + localStorage.getItem('plmode')); })

 <label><input type="checkbox" class="play_mode" value="101" />101</label> <label><input type="checkbox" class="play_mode" value="102" />102</label> <label><input type="checkbox" class="play_mode" value="103" />103</label> <label><input type="checkbox" class="play_mode" value="104" />104</label> <label><input type="checkbox" class="play_mode" value="105" />105</label>