在页面重新加载时存储 div 状态

Question

我在通用包装类下的一个 html 页面中有多个 div。 我在单击下一个和上一个选项时使用隐藏和显示方法。

我想要实现的目标：在页面重新加载/刷新时，当前显示的 div 应该在页面重新加载后显示。

简而言之，如果您从粉屏重新加载/刷新，页面重新加载后应该会显示相同的粉屏。

我尝试了什么：我存储的显示属性（无或块）是本地存储，并且在页面重新加载时试图再次为 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]);
  }
});

这是我试过的小提琴链接：

Page reload demo JS Fiddle link

Answer 1

您的 HTML 和 CSS 代码是完美的，但您需要在 JavaScript 代码中进行更正。

观察 1： 分配显示样式的“for”循环对变量 x 有问题。您需要为 x 分配整数值。

观察 2：当您单击“下一个”和“上一个”链接时，您需要从“div”元素中删除该“显示”样式。

听到新的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));
    });

您也可以download this file。请运行 index.html 以查看输出。

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

你可以不使用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));
});
});