为什么我的 localStorage 复选框/布尔值比较不适用于我的 Google Chrome 扩展程序？答案

【问题标题】：Why is my localStorage checkbox/boolean value comparison not working for my Google Chrome Extension?为什么我的 localStorage 复选框/布尔值比较不适用于我的 Google Chrome 扩展程序？
【发布时间】：2014-12-04 11:24:20
【问题描述】：

我已成功地将一个布尔变量映射到我的本地存储变量，该变量由我的 Chrome 扩展程序的 options.html 页面上的复选框触发。

我想知道的是根据我的 popup.html （浏览器按钮事件）上的选项中是否选中该复选框来显示/隐藏元素的最佳方法。以下 jQuery $("#myElement").hide ();不起作用 - 我也不希望它......但作为控制向最终用户显示这些元素的最佳方式，我有点不知所措。

注意：CSS 的 display: none 也是一个选项 - 我只是不知道解决这个问题的最佳方法。

   var value = localStorage["myCheckbox"];
   alert(localStorage.getItem('store.settings.myCheckbox'));

   if (value != null)
        alert(value);//this works (true if checked, false if not checked...)

    if (!value){
        alert('hide the element'); 
        $("#myElement").hide(); //hide a div element in my popup (chrome extension button popup)
    }

【问题讨论】：

您需要学习如何调试弹出窗口。右键单击扩展程序的按钮并选择“检查弹出窗口”。您将看到有意义的错误。
不要“编辑掉”这个问题。你的问题应该保留原来的问题，这样现在的答案才有意义。如果您有不同的问题（称为“第 2 部分”），请提出单独的问题。我再次回滚，最后一次。请将此保留为 SO 接受的格式。
应该保留问题的原因是 Stack Overflow 的目标 - 它不是专门帮助您，而是帮助遇到相同问题的每个人。因此，问题必须存在。您可以添加到您的问题中（尽管理想情况下问题不应该是多部分的，将它们拆分），但已经存在的答案必须仍然有意义。
抱歉，我看到了这样做的价值。这说得通。我会问一个新问题。我们至少可以更改这个问题的名称吗 - 它与显示/隐藏元素以及如何通过 javascript 或 jquery 调用它无关。（第 2 部分从未得到解决，这正是标题所描述的内容，恕我直言。）我想在我的新问题中保留这个旧标题，但未经您的同意我不想更改它。
拜托了！这将改善问题。我一定会在您编辑后点赞。

标签： javascript jquery css google-chrome-extension local-storage

【解决方案1】：

我假设您将复选框的 .checked 属性分配给 localStorage["myCheckbox"]，因此，由于 localStorage 变量只能是字符串，它可以是 @987654324 @ 或 "false"，取决于复选框的状态。

你的错误是这样做的：

if (!value) { 
    ...
}

上述条件永远不会满足，因为非空字符串（如“true”或“false”）在JavaScript中总是true，所以!"string"总是false .因此，要检查 popup.js 中复选框的值，您应该这样做：

var isChecked = localStorage.myCheckbox === "true";

if (!isChecked) $('#myElement').hide();
// if the checkbox is not checked hide the element

【讨论】：

【解决方案2】：

好的，我解决了第一个问题 - （它正在返回字符串，所以我需要使用 ===）

但是我仍然需要找出执行第 2 部分的最佳方法 - 显示/隐藏功能。我将发布一个新问题并使用链接更新此问题。非常感谢您的帮助，马可！

   var value = localStorage["myCheckbox"];
   var isChecked = localStorage.getItem('store.settings.myCheckbox');

    if (isChecked === "false"){ 
    alert('its FALSE');
    $('#myElement').hide();
    }

    if (isChecked === "true"){
    alert('its TRUE');
    $('#myElement').show();
    }

【讨论】：