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

Question

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

这是我的html：

<form> Favorites <input type="checkbox" class="favorite" value="'.$row['uid'].' onclick='.fave.add();'"></form>

这就是我目前在 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 有两个主要功能，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

Here's an example 让您朝着正确的方向前进：

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");
    }

});