как добавить localStorage, чтобы показать и скрыть div

Question

как добавить localStorage, чтобы показать / скрыть div?Прежде чем задать этот вопрос, я прочитал эту статью Используйте localStorage.setItem, чтобы сохранить то же самое показать / скрыть div , но это мне не помогает, но я не могу сделать это сам, поэтому мне нужна помощь!Благодарю.мой код

$(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

$(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 2

Попробуйте следующее:

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

Answer 3

Локальное хранилище достаточно простое в использовании.
Что вам нужно сделать, это сохранить переменную всех изменений, внесенных на странице, по умолчанию.Например, предположим, у вас есть 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")

, и используете ее для применения к вашему документу..