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

我有一个复选框，其值

$row['uid']

我想使用javascript或jquery存储在本地存储中。当用户“取消选中”复选框时，该值应从本地存储中删除

这是我的html：

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

---

非常感谢您的任何帮助

localStorage

有两个主要功能，

getItem

和

setItem

。对于

setItem

传递一个键和一个值。如果您再次写入该键，它将重写该值。因此，在您的情况下，如果选中一个框，您将执行

localStorage.setItem（“checkbox\u value”，true）

，如果不选中，您将输入

false

。要获取该值，您可以使用jQuery查看如下内容：

$（checkbox）.is（“：checked”）

，并使用简单的if-else子句传递true或false。然后，当您重新加载页面时，在

$（document）.ready（）

上，您可以使用

localStorage.getItem（key）

获取值，并使用Javascript设置复选框值

这就是我如何使用localStorage来记住复选框值的方法

希望我能帮忙！如果有什么不清楚的地方，请询问我。

要让您朝着正确的方向前进：

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

---

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

---

“当用户刷新页面时”是什么意思？每次页面加载时，该值都将存储在本地存储器中。感谢您的帮助！假设我想存储选中的复选框的所有不同值，我应该怎么做？我在LocalStorage上面添加了一段代码，LocalStorage只允许您存储字符串。因此，您可以使用循环创建一个字符串，该字符串的所有复选框值都由某个分隔符分隔。因此，例如，如果有四个复选框的值为true false false true，则字符串将为

“true\nfalse\nfalse\nRue”

，其中

\n

是分隔符。然后，您可以将该字符串存储在localStorage中，在检索该字符串时，可以将所有值放入如下数组：

array=localStorage.getItem（key）.split（'\n'）

。然后可以用新检索到的数组填充复选框。询问是否有什么需要澄清的问题鉴于

$row['uid']

是一个int，我上面发布的编辑代码是否有意义？是的，您的方向正确。但是我不知道如果没有选中复选框，为什么要调用removeItem。如果设置不同的int，不是更好吗？比如1=已选中，0=未选中？如果我有多个值要存储在localStorage中，这是否有效？不幸的是，该函数似乎不起作用。您可以使用JSON.stringify（obj）来实现该功能。您还可以将每个值存储在单独的插槽中（通过复选框名称或id）

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

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

});