Сохранить статус div при перезагрузке страницы

Question

У меня есть несколько div на одной html-странице под общим классом оболочки.Я использую метод скрытия и показа при нажатии следующей и предыдущей опции.

Чего я пытаюсь достичь : при перезагрузке / обновлении страницы отображаемый в настоящий момент div должен отображаться после перезагрузки страницы,

Короче говоря, если вы перезагружаете / обновляете с розового экрана, он должен показывать тот же розовый экран после перезагрузки страницы.

Что я пробовал: Я сохраняю свойства дисплея(none или block) - локальное хранилище и при перезагрузке страницы пытается снова присвоить div те же свойства.Большинство ответов и решений, которые я проверил в переполнении стека, касаются открытия той же вкладки при обновлении.но мой случай таков, что в той же вкладке у меня есть несколько div и я хочу открыть из того же состояния, в котором оно было раньше.

Логика, которую я использовал:

$(window).on('load', function(){
  var disp = localStorage.getItem("disp");
  var ustatus = JSON.parse(disp);
  $(".chk").text(ustatus);
  for (var x=ustatus; x<ustatus.length; x++){
    $(".pg"+x).css("display", ustatus[x]);
  }
});

Это ссылка на скрипту Iпробовал:

Демонстрация перезагрузки страницы JS Fiddle link

Answer 1

Вы можете сделать это без использования display, вы можете использовать on и off классы, я думаю, именно поэтому они созданы для

$(window).on('load', function(){
var disp = localStorage.getItem("disp");
var ustatus = JSON.parse(disp);
if(ustatus!=undefined){
 $(".chk").text(ustatus);
 for (var x=1; x<=ustatus.length; x++){
   if(ustatus[x-1]=='on'){
    $(".pg"+x).addClass("on").removeClass("off");
   }
   else{
    $(".pg"+x).addClass("off").removeClass("on");
   }
 }
}

$(".next").on("click", function(){
  $(this).parent().addClass("off").removeClass("on");
  $(this).parent().next().addClass("on").removeClass("off");
});

$(".prev").on("click", function(){

  $(this).parent().addClass("off").removeClass("on");
  $(this).parent().prev().addClass("on").removeClass("off");
});


$(window).on('beforeunload', function(){
var display = $(".clr").map(function(){
if($(this).hasClass('on'))
  return 'on';
else
  return 'off';
}).get();

localStorage.setItem("disp", JSON.stringify(display));
});
});

Answer 2

Вам не нужен класс on:

$(window).on('load', function(){
  var disp = localStorage.getItem("disp");
  var ustatus = JSON.parse(disp);
  $(".chk").text(ustatus);
  for (var x=0; x<ustatus.length; x++){
    $(".pg"+(x+1)).toggleClass("off", ustatus[x]);
  }
});

$(".next").on("click", function(){
  $(this).parent().addClass("off");
  $(this).parent().next().removeClass("off");
});

$(".prev").on("click", function(){
  $(this).parent().addClass("off");
  $(this).parent().prev().removeClass("off");
});

$(window).on('beforeunload', function(){
  var display = $(".clr").map(function(){
    return $(this).hasClass("off");
  }).get();
  localStorage.setItem("disp", JSON.stringify(display));
});

Fiddle

Примечание: вы не можете использовать $(window).on('load', ...) в скрипке- JS в редакторе запускается при нагрузке

РЕДАКТИРОВАТЬ: вы также можете проверить ustatus перед его применением, что-то вроде

if (Array.isArray(ustatus) && ustatus.filter(x => x === true).length === 1) {
  for (var x=0; x<ustatus.length; x++){
    $(".pg"+(x+1)).toggleClass("off", ustatus[x]);
  }
}

Answer 3

Ваш код HTML и CSS идеален, но вам нужно внести исправления в код JavaScript.

Замечание 1: В цикле "Вы" для назначения стиля отображения есть проблема с переменной x,Вам необходимо присвоить целочисленное значение x.

Замечание 2: Вам необходимо удалить этот стиль «display» из элементов «div», когда вы нажимаете ссылки «next» и «previous».

Прослушайте новое Js fiddle link с обновленным кодом.

$(window).on('load', function () {
        //localStorage.removeItem("disp");
        var disp = localStorage.getItem("disp");
        var ustatus = JSON.parse(disp);
        $(".chk").text(ustatus);
        for (var x = 1; x <= ustatus.length; x++) {
            $(".pg" + x).css("display", ustatus[x-1]);
        }
    });

    $(".next").on("click", function () {
        $(this).parent().addClass("off").removeClass("on").removeAttr("style");
        $(this).parent().next().addClass("on").removeClass("off").removeAttr("style");
    });

    $(".prev").on("click", function () {
        $(this).parent().addClass("off").removeClass("on").removeAttr("style");
        $(this).parent().prev().addClass("on").removeClass("off").removeAttr("style");
    });

    $(window).on('beforeunload', function () {
        var display = $(".clr").map(function () {
            return $(this).css("display");
        }).get();
        localStorage.setItem("disp", JSON.stringify(display));
    });

Вы также можете загрузить этот файл .Пожалуйста, запустите index.html, чтобы увидеть результат.