在本地存储中存储复选框值

我有一个复选框，其值为$row['uid']我想使用javascript或jquery存储在本地存储中。 当用户“取消选中”复选框时，应从本地存储中删除该值

这是我的HTML：

 
 Favorites  

这就是我目前在javascript中用于本地存储的内容。 我不太确定我应该如何添加和删除值$row['uid']

  var fave = fave || {}; var data = JSON.parse(localStorage.getItem("favorite")); data = data || {}; var fave = fave || {}; var data = JSON.parse(localStorage.getItem("favorite")); data = data || {}; $(function () { var data = localStorage.getItem("favorite"); if (data !== null) { $("input[name='favorites']").attr("checked", "checked"); } }); $("input[name='favorites']").click(function () { if ($(this).is(":checked")) { localStorage.setItem("favorite", $(this).val()); } else { localStorage.removeItem("favorite"); } }); 

任何和所有的帮助非常感谢！

Answer 1

localStorage有两个主要function， getItem和setItem 。 对于setItem您传入一个键和一个值。 如果再次写入该键，它将重写该值。 因此，在您的情况下，如果选中一个框，您将执行localStorage.setItem("checkbox_value", true) ，当取消选中时，您将传入false 。 要获得值，您可以使用jQuery来查看： $(checkbox).is(':checked')并使用简单的if-else子句传入true或false。 然后当您重新加载页面时，在$( document ).ready()您可以使用localStorage.getItem(key)获取值，并使用Javascript设置复选框值。

这就是我如何使用localStorage记住复选框值。

希望我帮忙！ 问我有什么不清楚的地方。

Answer 2

这是一个让你朝着正确的方向前进的例子 ：

 var boxes, arr; // This function loads the array and then checks the uid of each checkbox // against it. function checkBoxes() { arr = loadBoxArray(); $.each($('input[type=checkbox]'), function (i, el) { if (arr.indexOf(i) > -1) { $(this).prop('checked', true); } else { $(this).prop('checked', false); } }); } // If the localStorage item is available, load it into an array // otherwise set a default array and save it to localStorage function loadBoxArray() { if (localStorage.getItem('boxes')) { arr = loadBoxArray(); } else { arr = [0, 2]; saveBoxArray(arr); } } // Save the array to localStorage function saveBoxArray(arr) { localStorage.setItem('boxes', JSON.stringify(arr)); } // On page load check the boxes found in localStorage checkBoxes(); // Clicking a checkbox will update the checkbox array which is then saved to localStorage $('input[type=checkbox]').click(function () { var arr = $.map($('input[type=checkbox]:checked'), function (el) { return $(el).data('uid'); }); saveBoxArray(arr); }); 

Answer 3

如果您希望在页面刷新后保持复选框状态，并且您不介意使用jQuery：

http://jsfiddle.net/9L2Ac/

 $(function () { var data = localStorage.getItem("favorite"); if (data !== null) { $("input[name='favorites']").attr("checked", "checked"); } }); $("input[name='favorites']").click(function () { if ($(this).is(":checked")) { localStorage.setItem("favorite", $(this).val()); } else { localStorage.removeItem("favorite"); } });