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，右侧会显示input:checkbox，其名称为“NoćniRežim”，可激活黑暗模式，但不会停留在点击任何文章后的方式。

感谢任何帮助。

Answer 1

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

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: