Question

我有一个设置面板，上面有一个复选框，该复选框负责自动更改主题。第一个问题是不允许更改此复选框（我看到一个触发的函数）。第二个问题是我希望每次重新加载时都返回值（true或false）并将其设置为复选框。如何解决此问题？

     TimeSch(localStorage.getItem("'TimeSch'"));
        function TimeSch(a) {
            if (a) {
                document.getElementById('TimeSch').checked = 'true';
                console.log('True start');
                Set('TimeSch', true);
                $('#theme').prop('disabled', true);
                const hours = new Date().getHours();
                const isDayTime = hours > 6 && hours < 20;
                if (isDayTime) {
                    theme('White');
                    console.log('Auto White');
                } else {
                    theme('Dark');
                    console.log('Auto Dark');
                }
            } else {
                 document.getElementById('TimeSch').checked = 'false';
                    console.log('False start');
                $('#theme').prop('disabled', false);
                Set('TimeSch', false);
            }
        }
  function Set(name, value) {
        if (typeof Storage !== "undefined") {
            localStorage.setItem("'" + name + "'", value);
        } else {
            console.log('No localStorage supported. Oh, please chage your browser!');
        }
    }

https://codepen.io/abooo/pen/PVQaWB

Answer 1

您的代码段存在多个问题：

theme()函数没有实现
input[type="checkbox"]位于select元素的内部，该元素是无效标记，它们同时被启用/禁用

input[type=checkbox]:after

css不考虑复选框的状态，因此它始终仅显示x
设置元素的属性，不需要jQuery
要通过JS选中复选框，您应该给它Boolean，而不是字符串
您为什么要这样做：localStorage.setItem("'" + name + "'", ...？考虑直接使用：localStorage.setItem(name, ...

目前尚不清楚您通常想要达到什么目的，但是我做了一些补丁，至少它还有些鲜活：https://codepen.io/anon/pen/OdQEvr

Answer 2

第一件事，第4行和第18行使用布尔值

document.getElementById('TimeSch').checked = true;

第二，您不需要为localStorage键添加引号。只需：

localStorage.setItem(name, value);

localStorage.getItem("TimeSch")

最后一个问题是第3行：来自localStorage的值是字符串，因此条件将始终为true。将此更改为：

if (a === "true" || a === true)

它应该可以工作。

链接到这些更改：https://codepen.io/anon/pen/dadjGq?editors=1111

Javascript localStorage与复选框联系

2 个答案: