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

它不起作用，因为：

当localStorage中存储任何值时，它会被强制转换为字符串，因此当您存储原始值true或false时，它们会被强制转换为字符串{ {1}}和'true'。
从'false'检索值时，它仍为字符串。
在将字符串与localStorage或===进行比较时，您的比较使用了严格的true比较运算符，结果将始终为false。因此，false和if子句都不会成立，因此HTML中的默认else属性仍然存在。请注意，使用非严格checked比较不会使代码按预期工作。这是因为字符串==和'true'都强制为'false'。因此，始终会遵循true分支。

您可以根据从else返回的字符串值设置autoremove_backup来修复此问题：

localStorage

我过去使用的另一种方法是使用var autoremove_backup = localStorage.getItem("autoremove") === 'true' ? true : false;和localStorage序列化/反序列化JSON.stringify中存储的所有内容。

设置它：

JSON.parse

获得它：

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

它增加了一点开销，但它会自动将布尔值转换回布尔值。

没有从localStorage获得与已保存变量相同的类型？

1 个答案: