保存された変数と同じ型がlocalStorageから取得されていませんか？

Question

私は簡単なタスクリストを書いた。以下のJavaScriptコードは重要な部分はlocalStorageです。私がこれまでに作ったのはこれです：JSBin

私が達成したいのは、ページをリロードするときに、エントリをすぐに削除する必要がある場合（テキストフィールドの横のチェックボックスがオンになっているかどうか）です。最後の訪問から保存され復元されました。私は最初、私はオフにして、その後、私はそれをしたいとそれを動作させるために、もう一度チェックボックスをチェックする必要があるページを読み込ん現在

...ここ

である私はJavaScript/jQueryのコード：

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

は、それが動作していない理由は次のとおりです。

1. 任意の値は、あなたがプリミティブ値を格納するようにすると、文字列に強制変換されlocalStorageに格納されている場合trueまたはfalseの場合は、文字列'true'および'false'に強制的に変換されます。

2. localStorageから値を取得すると、文字列のままです。

3. あなたの比較はtrueまたはfalseに文字列を比較するとき、結果は常にfalseなり、厳密な===比較演算子を使用しています。したがって、ifもelseもtrueになりませんので、HTMLからのデフォルトのchecked属性が残ります。 ==の非厳密な比較を使用しても、意図したとおりにコードが動作するわけではないことに注意してください。これは、文字列'true'と'false'の両方がtrueに強制されているためです。したがって、elseブランチは常に追跡されます。

あなたはlocalStorageから取り戻す文字列の値に基づいてautoremove_backupを設定することで、それを修正することができます：

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

私が過去に使用した別のアプローチは、/シリアライズに保存されているすべてのものをデシリアライズすることですlocalStorageとJSON.stringifyとJSON.parse。

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

それを取得するには：それを設定するには

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

それはオーバーヘッドを少し追加しますが、それは自動的にブール値にブール値に変換します。