javascript - 复选框未检查到正确的值

Question

我有应该是简单的代码，但出于某种原因，我没有理解正确设置复选框的逻辑有什么问题。我正在使用本地存储，以便检查状态在 session 之间保持不变。

这是我的代码。发生的事情是出于某种原因，即使 console.log 在它应该为 false 时打印出 false，或者在它应该为 true 时打印出 true，无论哪种方式，复选框最终都会被选中。

var checkboxElement = document.getElementById("checkbox").getElementsByTagName('input')[0]

    checkboxElement.addEventListener('click', function() {
        console.log(checkboxElement.checked)
        if (localStorage != undefined) {
            localStorage.setItem("checkbox", checkboxElement.checked)
        }
    });

    if(localStorage != undefined)
    {
        console.log("Local storage supported.");

        //set defaults
        if (localStorage.getItem("checkbox") == undefined) {
            localStorage.setItem("checkbox", false)
        }

        var isChecked = localStorage.getItem("checkbox")
        checkboxElement.checked = isChecked
        console.log(isChecked)
    }

Answer 1

因为 localStorage 将值存储为字符串，所以当您有 false 时，它实际上存储为 'false'，这是一个真值，所以即使复选框是未选中它将被标记为已选中。

var isChecked = localStorage.getItem("checkbox") === 'true';
checkboxElement.checked = isChecked;
console.log(isChecked)

演示:Fiddle