How to keep changes in the same element even when page is changed using javascript?

Question

In my web application there is a left menu that is of very big size. I have placed a button to make small it. Everything is working when I click on button my menu is being hidden and another small menu is being shown. When I click on any link in small menu, another page is loaded and big menu is shown. If I want to see small menu again I need to click button. I want that if any page is loaded, menu should be shown in last form that was on last page (It can be big also if it was in big form on last page).

My code is here

HTML

<div class="flLeft similarHeight">
    <ul class="nav metismenu" id="side-menu">
        <li class="nav-header">
            <div class="logo"><a href="index.html">Brand Name</a></div>
        </li>
    </ul>
</div>
<div class="flLeftsmall">
    <ul class="nav smallnavigation">
        <li class="nav-header">
            <div class="logo"><a href="index.html">Brand</a></div>
        </li>
    </ul>
</div>
<div class="pull-left">
    <span><i class="glyphicon glyphicon-triangle-left menu-big"></i></span>
</div>

CSS

.flLeft {
    background:#1b3b5e;
    width: 220px;
    height: 200px;
}
.flLeftsmall {
    display: none;
    background:#1b3b5e;
    width: 80px;
    height: 200px;
    color: #fff;
}
a{color: #fff;}

jQuery

$(document).ready(function () {
$('.menu-big').click(function () {
    $(this).toggleClass('glyphicon-triangle-right glyphicon-triangle-left');
    $('.flLeft').toggle('slide');
    $('.flLeftsmall').toggle('slide');
});
});

I am using bootstrap and jQuery plugins properly.
You can see my jsfiddle here.
Please help me.!

so you want the page state to persist between page refreshes? If so, you either need to pass some querystring parameters containing info about the state when you refresh the page, and then read them back and act on them, or you need a server-side language that could maintain state for you (using session, database etc), or you could perhaps investigate using LocalStorage on the browser. — ADyson, Apr 26 '17 at 11:09

score 2 · Accepted Answer · edited Jun 24 '20 at 06:12

Can be achieved using sessionStorage or LocalStorage. It's not elegant, but it works.

Within your click event for collapsing the menu, add a storage item to save the state of the menu

sessionStorage.setItem('menuSize', 'small'); // Or big etc, will need to break this up into two click events.

Then on the pages subsequent, check this storage item to see whether the user has chosen the small or bigger menu.

if (sessionStorage.getItem('menuSize') == 'small') {
  $('.flLeft').css("display", "none");
  $('.flLeftsmall').css("display", "block");
}

Updated fiddle: https://jsfiddle.net/5vjf0ffs/2/

score 2 · Answer 2 · edited Jun 24 '20 at 06:10

Try this

It uses localStorage. To store value and then use it to check if we shall display either the small or big box.

$(document).ready(function() {
  if (localStorage.getItem("slide") == "small") {

    $('.flLeft').toggle('slide');
    $('.flLeftsmall').toggle('slide');
  }

  $('.menu-big').click(function() {
    $(this).toggleClass('glyphicon-triangle-right glyphicon-triangle-left');
    if (localStorage.getItem("slide") == null) {
      localStorage.setItem("slide", "small");
    } else {
      localStorage.removeItem("slide");
    }

    $('.flLeft').toggle('slide');
    $('.flLeftsmall').toggle('slide');
  });
});

How to keep changes in the same element even when page is changed using javascript?

2 Answers2