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

Question

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

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

所以简而言之，如果您从粉红色屏幕重新加载/刷新，它应该在页面重新加载后显示相同的粉红色屏幕。

我尝试了什么: 我将显示属性(无或 block )存储为本地存储，并在页面重新加载时尝试再次为 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]);
  }
});

这是我试过的 fiddle 链接:

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 以查看输出。