javascript - 如何添加localStorage来显示和隐藏div

Question

如何添加localStorage来显示/隐藏div？问这个问题之前我看过这篇文章Use localStorage.setItem to keep same show/hide divs但这对我没有帮助，我仍然不能自己做，所以我需要帮助!谢谢。我的代码

$(function() {
  $("#mesfavgame").css("display", "none");
  $(".AvGamesCheckBox").click(function() {
    if (this.checked) {
      $("#mesfavgame").hide();
    }
    else {
      $("#mesfavgame").show();
    }
  });
});

如果复选框 .AvGamesCheckBox 被选中，localStorage 隐藏消息 id="mesfavgame"，如果复选框 .AvGamesCheckBox 未被选中，localStorage 显示消息 code>id="mesfavgame"

<div id="favorite">
  <div id="mesfavgame"> You don't have any favorite game </div>   
</div>

Answer 1

尝试以下操作:

HTML:

<input type="checkbox" class="AvGamesCheckBox">
<div id="favorite">
  <div id="mesfavgame"> You don't have any favorite game </div>   
</div>

JS:

$(function() {
  var status = localStorage.getItem('chkStatus');
  if(status == 'true'){
    $("#mesfavgame").css("display", "none");
    $(".AvGamesCheckBox").attr('checked', true)
  }
  else{
    $("#mesfavgame").css("display", "block");
    $(".AvGamesCheckBox").attr('checked', false)
  }
  $(".AvGamesCheckBox").click(function() {
    if (this.checked) {
      $("#mesfavgame").hide();
    }
    else {
      $("#mesfavgame").show();
    }
    localStorage.setItem("chkStatus", this.checked);
  });
});