设置变量以保存值始终为真答案

【问题标题】：Setting varibable to saved value always gets true设置变量以保存值始终为真
【发布时间】：2020-06-01 11:27:36
【问题描述】：

我正在使用 electron 开发桌面应用程序，这意味着我正在使用 javascript 和其他网络工具。在这段代码中，我试图从 localStorage 中读取一个布尔值并将其写入 HTML 复选框的选中属性： devtools = document.getElementById('dev-tools-checkbox'); console.log('The saved value: ' + localStorage.getItem('devtools')); devtools.checked = localStorage.getItem('devtools');

奇怪的是，无论控制台将记录的值显示为什么，复选框总是设置为 true。当像这样反转输入时 devtools.checked = !localStorage.getItem('devtools'); 该值始终为假。我检查了设置的值是否正确，并且记录的值是正确的。

当我设置以下内容时：devtools.checked = false; 它正确地将值设置为 false。与devtools.checked = true 相同。

任何关于永远真实价值来自何处的线索将不胜感激。如果您需要更多信息，请尽管询问。

提前致谢

【问题讨论】：

标签： javascript checkbox electron boolean

【解决方案1】：

localStorage.getItem() 返回一个 DOMString，因此测试将始终通过，除非项目未设置 (https://developer.mozilla.org/fr/docs/Web/API/Storage/getItem)。

您应该检查项目是否等于 true：

devtools.checked = localStorage.getItem('devtools') == 'true';

【讨论】：

【解决方案2】：

根据MDN Documentation on localStorage.setItem ()，您只能在用户代理（又名浏览器）提供的任何Storage 中存储DOMString 类型的元素。因此，您正在检索的是一个字符串，并且由于复选框上的 HTML 属性 checked 不需要任何输入，因此仍会对其进行检查。

以这个复选框为例：

&lt;input type="checkbox" checked="false" /&gt;

虽然checked 属性设置为false，但复选框被选中。因此，您需要首先将您从localStorage 检索的字符串值转换为布尔值。这可以通过使用以下代码来完成：

devtools = document.getElementById ('dev-tools-checkbox');
console.log ('The saved value: ' + localStorage.getItem('devtools'));
devtools.checked = localStorage.getItem('devtools') === "true";

【讨论】：