Javascript本地存储与复选框的联系_Javascript_Local Storage

Javascript本地存储与复选框的联系

javascript

Javascript本地存储与复选框的联系,javascript,local-storage,Javascript,Local Storage,我有一个设置面板，上面有一个复选框，负责自动主题更改的开关。第一个问题是该复选框不允许更改（我看到一个函数被触发）。第二个问题是，我希望在每次重新加载时返回值（true或false）并设置为复选框。如何解决这个问题 TimeSch(localStorage.getItem("'TimeSch'")); function TimeSch(a) { if (a) { document.getElementById('T

我有一个设置面板，上面有一个复选框，负责自动主题更改的开关。第一个问题是该复选框不允许更改（我看到一个函数被触发）。第二个问题是，我希望在每次重新加载时返回值（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!');
        }
    }

TimeSch（localStorage.getItem（'TimeSch'）；
函数TimeSch（a）{
如果（a）{
document.getElementById（'TimeSch'）。checked='true'；
log（'True start'）；
设置（'TimeSch'，true）；
$（'theme'）.prop（'disabled'，true）；
const hours=新日期（）.getHours（）；
const isDayTime=小时数>6和小时数<20；
如果（isDayTime）{
主题（“白色”）；
console.log（'Auto-White'）；
}否则{
主题（“黑暗”）；
console.log（'Auto Dark'）；
}
}否则{
document.getElementById（'TimeSch'）。checked='false'；
console.log（'False start'）；
$（'theme'）.prop（'disabled'，false）；
设置（'TimeSch'，false）；
}
}
函数集（名称、值）{
if（存储类型！=“未定义”）{
setItem（“'”+name+“'”，值）；
}否则{
log（'不支持本地存储。哦，请更改浏览器！'）；
}
}

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

没有实现
```
theme（）
```
函数
```
input[type=“checkbox”]
```
位于
```
select
```
元素内部，该元素是无效的标记，并且它们同时被启用/禁用
```
input[type=checkbox]的css:after
```
不考虑复选框的状态，因此它总是只显示
```
x
```
要设置元素的属性，不需要
```
jQuery
```
要通过JS检查复选框，您应该为其指定
```
布尔值
```
，而不是字符串

目前还不清楚您通常想要实现什么，但我做了一些补丁，至少它有点活跃起来：

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

没有实现
```
theme（）
```
函数
```
input[type=“checkbox”]
```
位于
```
select
```
元素内部，该元素是无效的标记，并且它们同时被启用/禁用
```
input[type=checkbox]的css:after
```
不考虑复选框的状态，因此它总是只显示
```
x
```
要设置元素的属性，不需要
```
jQuery
```
要通过JS检查复选框，您应该为其指定
```
布尔值
```
，而不是字符串

目前还不清楚您通常想要实现什么，但我做了一些补丁，至少它有点活跃起来：

首先，在第4行和第18行使用布尔值

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

其次，不需要为localStorage键添加引号。只需执行以下操作：

localStorage.setItem(name, value);

localStorage.getItem("TimeSch")

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

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

它应该会起作用

链接到这些更改：

首先，在第4行和第18行使用布尔值

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

其次，不需要为localStorage键添加引号。只需执行以下操作：

localStorage.setItem(name, value);

localStorage.getItem("TimeSch")

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

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

它应该会起作用

链接到这些更改：

localStorage仅存储字符串。因此它很可能存储一个true字符串或一个false字符串。这两个字符串都是真实的。也不要使用

Set

来命名变量或函数（尤其是在全局范围内），因为它是一个。我尝试了Taplar用字符串更改布尔值的想法，但这似乎只是问题的一部分，并没有解决它。localStorage只存储字符串。因此它最有可能存储一个true字符串或false字符串。这两个字符串都是真实的。也不要使用

Set

来命名变量或函数（特别是在全局范围内），因为它是一个。我尝试了Taplar用字符串改变布尔值的想法，但这似乎只是问题的一部分，并没有解决它。