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

Question

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

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

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

我尝试了什么： 我正在存储显示属性（none 或块）是本地存储，并且在页面重新加载时尝试将相同的属性提供给 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]);
  }
});

这是fiddlelink我试过了：

Page reload demo JS Fiddle link

Answer 1

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

观察 1： 您 "for" 分配显示样式的循环存在变量 x 问题。您需要为 x 分配整数值。

观察 2： 当您单击 "next" 和 [=31= 时，您需要从 "div" 元素中删除 "display" 样式] 链接。

听说是新的 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

你可以不使用 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 3

你真的不需要 on class:

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

注意：您不能在 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]);
  }
}

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

Store div status on page reload

javascript

jquery

css

session-state

page-refresh