本地存储不保存复选框未选中阶段

Question

我正在使用 jquery 和本地存储来保存复选框的状态。

为了节省我使用：

function save_form() {
    window.localStorage.setItem('fb_show', $('#fb_show').val());
    alert('Saved');
}

function load_form() {
    var fb_checkbox_val = window.localStorage.getItem('fb_show');
    alert(fb_checkbox_val);

    if (fb_checkbox_val == 'on') {
        $("#fb_show").prop("checked", true);
    } else {
        $("#fb_show").prop("checked", false);
    }
}

问题是，当它未选中时，它会将值保存为 'on'，因此该部分有效，但是当我取消选中该复选框并再次保存时，它仍然保存为 'on' ...所以之后的代码将再次将其设置为选中状态。

我该如何解决这个问题？

Answer 1

您应该在 localStorage:

中保存复选框的状态

function save_form() {
    window.localStorage.setItem('fb_show', $('#fb_show').is(':checked'));
    alert('Saved');
}

function load_form() {
    var fb_checkbox_val = window.localStorage.getItem('fb_show') === 'true' ? true : false;
    alert(fb_checkbox_val);

    $("#fb_show").prop("checked", fb_checkbox_val);
}

Answer 2

未选中的复选框实际上没有值，因此您必须检查它是否被选中并保存该值。 $("#fb_show").is(":checked")

本地存储不保存复选框未选中阶段

Local storage not saving the checkbox unchecked stage

html

javascript

checkbox

jquery

local-storage