如何在页面重新加载时保持输入复选框的状态

Question

如何存储输入复选框当前状态的 cookie？每次重新加载页面时，状态都会恢复为默认值（未选中），我一直在嗡嗡作响。我什至使用了一个没有成功的库

https://github.com/js-cookie/js-cookie Cookie.set() 和 Cookie.get() 但没有成功。

我也一直在阅读有关 localStorage JavaScript API 的信息，但似乎无法正常工作。

jQuery 代码：

$(function () {
    $('input[type="checkbox"]').click( () => {
        if ($(this).is(':checked')) {
            $('input[type="checkbox"]').prop('checked', true, localStorage.getItem('checked')).attr('checked', 'checked');
            localStorage.setItem('checked', 'checked');
            $('img').attr('src', '/full_logo_transparent.png');
            $('link#hueman-main-style-css').attr('href', '/darkstyle.min.css');
            console.log('Dark Mode enabled');
        } else {
            $('input[type="checkbox"]').prop('checked', false);
            $('link#hueman-main-style-css').attr('href', '/main.min.css');
        }
    })
});

这是为了记住输入复选框的状态并在页面重新加载时保存它，这样就不必每次都切换它（它会加载额外的 CSS 文件）

我错过了什么吗？顺序正确吗？

该站点是https://itmagazin.info，在右侧您会找到名称为“Noćni Režim”的input:checkbox，它会激活黑暗模式，但点击后它不会保持这种状态在任何文章上。

感谢任何帮助。

Answer 1

这比你做的要简单得多。只需在页面加载时获取最后存储的值，并根据被单击后的复选框状态进行适当的设置。

由于沙盒，以下代码在 Stack Overflow sn-p 环境中无法运行，但您可以对其进行测试here。

$(function () {
  // Reset the checkbox to the last state on the last visit
  // The value in localStorage will be the strings "true", "false" or
  // it won't be there at all, in which case "" will be returned.
  // The opposite of "true" (or !"true") is the Boolean false and the
  // opposite of that (!!"true") is the Boolean true.  The opposite of
  // "" (!"") is the Boolean true and the opposite of that (!!"") is the
  // Boolean false
  $('#check').prop("checked", !!localStorage.getItem("darkMode"));

  $('#check').on("click", function() {
    if ($(this).is(":checked")) {
      localStorage.setItem('darkMode', 'true');
      $('img').attr('src', '/full_logo_transparent.png');
      $('link#hueman-main-style-css').attr('href', '/darkstyle.min.css');
      console.log('Dark Mode enabled');
    } else {
      localStorage.setItem('darkMode', 'false');
      $('link#hueman-main-style-css').attr('href', '/main.min.css');
      console.log("No Dark Mode");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="test" id="check"><label for="check">Item</label>