使用jquery选中/取消选中复选框时如何添加/删除localStorage？

Question

我想用复选框设置/删除localStorage 。 checked ，localStorage 设置并从 localStorage 中删除当前设置。

 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>

但是代码只给了我一个复选框checked状态的值。 我希望它从 push() 或 pop() 存储像pmode这样的数组。

请在这里找到工作小提琴： https : //jsfiddle.net/grus6t25/

Answer 1

您可以将所有复选框值存储在 localStorage 中的数组或对象中。 这是一个使用数组的示例：

 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

每当单击复选框时，从本地存储中获取项目。 检查该值是否为数组。 当复选框被选中并且该值尚未在数组中时，添加它。 当它未选中并在数组中时，将其删除。 然后将整个阵列更新到本地存储。

 $('.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

您正在从本地存储中删除所有值，而不仅仅是当前复选框。

无论您是选中还是取消选中，都需要在更新后将整个数组存储到localStorage() 。

取消选中不应该从数组中弹出——删除最后一个值，而不是当前复选框的值。 您需要在数组中找到当前值并将其删除。

 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>