在使用javascript更改页面时，如何将更改保持在相同的元素中？

Question

在我的web应用程序中，有一个非常大的左边菜单。我放了一个按钮让它变小。当我点击按钮时，所有的东西都在工作，我的菜单被隐藏，另一个小菜单正在显示。当我单击小菜单中的任何链接时，将加载另一个页面并显示大菜单。如果我想再次看到小菜单，我需要点击按钮。我希望，如果任何页面被加载，菜单应该以最后一页上的最后一种形式显示(如果它在最后一页是大的，也可以是大的)。

我的密码在这里

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

我正在正确地使用引导和jQuery插件。

你可以看到我的小提琴手这里。

请救救我！

Answer 1

可以使用sessionStorage或LocalStorage实现。不太雅致，但很管用。

在要折叠菜单的单击事件中，添加存储项以保存菜单的状态。

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

然后，在随后的页面上，检查此存储项，以查看用户是否选择了小菜单或大菜单。

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

更新小提琴：https://jsfiddle.net/5vjf0ffs/2/

Answer 2

试试这

它使用localStorage.来存储价值，然后使用它来检查我们是否要显示小的或大的框。

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