Nicht den gleichen Typ von localStorage wie die gespeicherte Variable hatte?

Question

Ich schrieb eine einfache Aufgabenliste. Der JavaScript-Code ist unten, der wichtige Teil ist über localStorage. Was ich bisher gemacht, ist dies: JSBin

Was ich erreichen möchte, ist, dass, wenn ich die Seite neu zu laden, wenn die Einstellung die Einträge sofort entfernt werden sollte (wenn das Kontrollkästchen neben dem Textfeld aktiviert ist oder nicht), ist gespeichert und restauriert vom letzten Besuch.

Zur Zeit, als ich zum ersten Mal die Seite geladen werden muss ich deaktivieren und dann das Kontrollkästchen noch einmal überprüfen, um es funktioniert, wie ich es will ...

Hier ist mein JavaScript/jQuery-Code:

var anzahl = 0; 
var autoremove = true; 
var autoremove_backup = localStorage.getItem("autoremove"); 
console.log(localStorage.getItem("autoremove")); 

$(document).ready(function() { 
    if(autoremove_backup===false){ 
    $("#autoremove").prop("checked", false); 
    } 
    else if (autoremove_backup===true){ 
    $("#autoremove").prop("checked", true); 
    } 
    autoremove = autoremove_backup; 
    setInterval(entry, 2000); 
    $("button").on('click', function() { 
    if(this.id=="add"){ 
     var r = $('<div id="'+ "div"+String(anzahl) +'"><input type="checkbox" id="'+String(anzahl)+'">' + '<label for="'+ String(anzahl)+'" id="'+ "label" +String(anzahl)+'">' + $("#task").val() + '</label><br></div>'); 
     $("#var").append(r); 
     anzahl = anzahl +1; 
    } 
    }); 
    $('input[type=checkbox]').change(
    function(){ 
     if (this.checked) { 
     if(String(this.id)==="autoremove"){ 
      autoremove=true; 
      saveAutoremove(autoremove); 
     } 
     } 
     else { 
     if(String(this.id)==="autoremove"){ 
      autoremove=false; 
      saveAutoremove(autoremove); 
     } 
     } 
    }); 

}); 

function entry(){ 
if(autoremove===true){ 
    $('#var input:checked').each(function() { 
    $("#div"+String(this.id)).remove(); 
}); 
} 
} 


function saveAutoremove(input){ 
    localStorage.setItem("autoremove", input); 
} 

Answer 1

es funktioniert nicht, weil:

1. wenn jeder Wert in localStorage gespeichert wird es in einen String dazu gezwungen wird, so dass, wenn Sie die primitiven Werte speichern true oder false, werden sie zu den Strings 'true' und 'false' gezwungen.

2. Wenn Sie den Wert von localStorage abrufen, bleibt eine Zeichenfolge.

3. Ihre Vergleiche des strengen === Vergleichsoperator verwenden, wenn eine Zeichenfolge true oder false zu vergleichen, das Ergebnis wird immer false. Daher wird weder die if noch else Klausel jemals wahr sein, so dass das Standard checked Attribut aus dem HTML bleibt. Beachten Sie, dass die Verwendung des nicht strikten Vergleichs == den Code nicht wie vorgesehen funktionieren lassen hätte. Dies liegt daran, dass die Strings 'true' und 'false' beide auf true erzwingen. Somit würde der Zweig else immer gefolgt werden.

Sie können das Problem beheben, indem autoremove_backup Einstellung basierend auf der String-Wert, den Sie zurückbekommen von localStorage:

var autoremove_backup = localStorage.getItem("autoremove") === 'true' ? true : false; 

Ein weiterer Ansatz, den ich in der Vergangenheit verwendet habe, ist alles gespeichert serialisiert/deserialisiert in localStorage mit JSON.stringify und JSON.parse.

es fest:

function saveAutoremove(input) { 
    localStorage.setItem("autoremove", JSON.stringify(input)); 
} 

es zu bekommen:

var autoremove_backup = JSON.parse(localStorage.getItem("autoremove")); 

Es ein wenig Overhead hinzufügt, aber es booleans zurück zu booleans automatisch konvertiert.