CODEWITHSUNDEEP
javascriptjquerycsssession-statepage-refresh
AKNair
AKNair

Reputation: 1587

Store div status on page reload

I have multiple divs in one html page under common wrapper class. I am using hide and show method on clicking next and previous option.

What I am trying to achieve: On page reload/refresh, the div which is showing currently should show after page reload.

So in short if you reload/refresh from pink screen, it should show same pink screen after page reload.

What I tried: I am storing the display properties (none or block) is local storage and on page reload trying to give same properties to divs again. Most of the responses and solution I checked in Stack overflow is regarding opening the same tab when refresh. but my case is what in same tab I have multiple div and I want to open from the same state which it was earlier.

Logic I used:

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

This is fiddle link I tried:

Page reload demo JS Fiddle link

Upvotes: 0

Views: 237

Answers (3)

Hardik Sheth
Hardik Sheth

Reputation: 47

Your HTML and CSS code is perfect but you need to make corrections in your JavaScript code.

Observation 1 : You "for" loop to assign display style has problem with variable x. You need to assign integer value to x.

Observation 2 : You need to remove that "display" style from "div" elements when you click on "next" and "previous" links.

Hear is new Js fiddle link with updated code.

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

You can also download this file. Please run index.html to see the output.

Upvotes: 1

ic3b3rg
ic3b3rg

Reputation: 14927

You don't really need the 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

note: you can't use $(window).on('load', ...) in a fiddle - the JS in the editor is run on load

EDIT: you might also want to validate ustatus before applying it, something like

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]);
  }
}

Upvotes: 0

Mesar ali
Mesar ali

Reputation: 1898

You can do it without using display, you can use on and off classes, i think that's why they are created for

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

Upvotes: 0

Related Questions