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

我在一个html页面的公共包装类下有多个div。 我在单击“下一步”和“上一步”选项时使用“隐藏并显示”方法

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

所以简而言之，若你们从粉色屏幕重新加载/刷新页面，那个么页面重新加载后，它应该会显示相同的粉色屏幕

我尝试的内容：我将显示属性（无或块）存储为本地存储，并在页面重新加载时尝试再次为div提供相同的属性。我在Stack overflow中检查的大多数响应和解决方案都是关于在刷新时打开相同的选项卡。但我的情况是，在同一个选项卡中，我有多个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]);
  }
});

$（窗口）.on（'load'，function（））{
var disp=localStorage.getItem（“disp”）；
var-ustatus=JSON.parse（disp）；
$（“.chk”）.text（ustatus）；
对于（var x=ustatus；x而言，您的HTML和CSS代码非常完美，但您需要在JavaScript代码中进行更正

观察1:要指定显示样式的“for”循环存在变量x的问题。您需要将整数值指定给x

观察2:单击“下一步”和“上一步”链接时，需要从“div”元素中删除该“display”样式

Hear是新的，带有更新的代码

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

$（窗口）.on（'load'，函数（）{
//localStorage.removietem（“disp”）；
var disp=localStorage.getItem（“disp”）；
var-ustatus=JSON.parse（disp）；
$（“.chk”）.text（ustatus）；
对于（var x=1；x您可以不使用
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));
});
});

$（窗口）.on（'load'，function（））{
var disp=localStorage.getItem（“disp”）；
var-ustatus=JSON.parse（disp）；
如果（ustatus！=未定义）{
$（“.chk”）.text（ustatus）；
对于（var x=1；x您实际上不需要
类上的
：

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

在这里添加html代码，这样就只有一个div可以同时激活，对吗？@bhumisah-JS fiddle在我的问题中有完整的代码细节。@seethrough-是的，一次只激活一个div。实际上我有三个div的表单。只有在用户完成一个表单后，他才能进入下一个表单。因此，一次只有一个div可以激活我将处于活动状态。如果他刷新或可能是internet断开连接，他应该从同一页开始。这是我的目标。感谢您的时间和努力。我尝试了您的建议。但不幸的是，它不起作用。如果您单击“下一步”然后到达青色div，从那里如果你刷新页面，它应该只打开青色div。而不是现在打开的绿色div。请下载文件并打开index.html文件它工作了dude！！根据@ic3b3rg响应，我认为$（window）。on（'load'，…）在fiddle中出现的问题是，我无法看到更改。是的…您无法在fiddle中运行此代码…我很高兴您的问题得到解决…谢谢…使用此方法，next和prev不起作用。请使用您的代码检查我的尝试：在本地运行时，我在onload中添加了其他事件，您只需关闭它}）$（“.next”）并将其从底部移除。
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]);
  }
}