Checkbox prüft nicht auf den richtigen Wert

Question

Ich habe, was sollte einfacher Code sein, aber aus irgendeinem Grund bekomme ich nicht, was ist falsch mit der Logik für die Einstellung der Checkbox richtig. Ich verwende lokalen Speicher, so dass der überprüfte Status zwischen Sitzungen beibehalten wird.

Hier ist mein Code. Was passiert, ist aus irgendeinem Grund, obwohl die console.log falsch ausgibt, wenn es falsch sein sollte, oder wahr, wenn es wahr sein sollte, wie auch immer das Kontrollkästchen überprüft wird.

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

Da local den Wert als Zeichenfolge speichert, so dass, wenn Sie false haben, ist es wirklich so 'false' gespeichert, die ein truthy Wert ist so, auch wenn die Checkbox deaktiviert war es markiert wird, wie geprüft.

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

Demo: Fiddle

Answer 2

Kontrolle der 3. Zeile von unten. checkboxElement.checked erwartet einen booleschen Wert. Wenn kein boolescher Wert angegeben wird, wird der Wert auf den booleschen Wert gezwungen, indem einige Regeln befolgt werden (oft führt diese Umwandlung/Abweichung zu einem seltsamen Ergebnis).

isChecked enthält "true"/"false" (als String). Ich habe einen ternären Operator verwendet, um eine korrekte boolesche Darstellung der Zeichenfolge "true"/"false" zu erzeugen.

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"); 


    // .checked property needs boolean value. Thats why the following line is re-coded to produce a boolean. 
    checkboxElement.checked = isChecked === "false" ? false : true; 
    console.log(isChecked); 
}