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显示消息id="mesfavgame"

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

Answer 1

易于使用的本地存储。
您应该做的是保留默认情况下页面中所有更改的变量。例如，假设您在页面上有一个div，用户可以显示或隐藏它：

#header-div

一开始是隐藏的。您只需在打开时将其添加到数组中，然后在关闭时将其删除即可。然后将其保存到本地存储中

openedDivs= [];
$(".clickable-header").click(function() {
    if (this.checked) {
        $("#header-div").hide();
        openedDivs= openedDivs.filter(function(value) { return value !== "header-div" });
        localStorage.setItem("openedDivs", openedDivs);
    }
    else {
        $("#header-div").show();
        openedDivs.push("openedArray");
        localStorage.setItem("openedDivs", openedDivs);
    }
});

然后，只需在页面加载时，使用

从存储中获取变量

localStorage.getItem("openedDivs")

并使用它将其应用于您的文档。

Answer 2

$(function() {
$("#mesfavgame").css("display", "none");
$(".AvGamesCheckBox").click(function() {
        if (this.checked && localStorage.getItem("isChecked") != null && localStorage.getItem("isChecked") == "true") {
            $("#mesfavgame").hide();
            localStorage.setItem("isChecked", "false")
        }
        else {
            $("#mesfavgame").show();
            localStorage.setItem("isChecked", "true");
        }
    });
});

Answer 3

尝试以下操作：

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

如何添加localStorage以显示和隐藏div

3 个答案: