Как передать состояние меню по страницам?

Question

Я создал очень минимальное меню для сайта-портфолио, пытаясь сохранить чистоту навигации с помощью интерактивных слоев. Это здорово, за исключением того, что каждый раз, когда пользователь переходит на новую страницу, ему приходится щелкать мышью, чтобы снова открыть меню и подменю.

Я хочу попытаться выяснить, как снова открыть его до последнего состояния, в котором оно было, когда меню загрузится на другой странице. Я полагаю, мне нужно использовать повар ie, чтобы сохранить щелчок, который открыл различные подменю, но я застрял при передаче события clicked на следующую страницу в качестве переменной, а затем использую это, чтобы эффективно установить меню там, где оно было оставлено выкл.

$( document ).ready(function() {
  $('.dc-siteSimpleMenu ul li').click(function(ev) {
    $(this).find('>ul').slideToggle()
      .end().siblings().find('ul').hide();
    ev.stopPropagation();
  });
$('.dc-siteSimpleMenu-lvl-1 a').click(function(ev) {
  $('ul .dc-siteSimpleMenu-lvl-2').hide();
  $(this).next('ul .dc-siteSimpleMenu-lvl-2').css({
    'display': 'flex',
    'flex-direction': 'column',
    'flex-wrap': 'wrap',
    'height': '55px'
  });;
  ev.stopPropagation();
});
});

.dc-siteSimpleMenu {
  height: 60px;
  margin: 0px;
  padding: 0px;
  width: 100%;
  background-color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
  line-height: 13px;
  letter-spacing: 0em;
  text-transform: uppercase;
}

.dc-siteSimpleMenu ul ul {
  display: none;
}

.dc-siteSimpleMenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dc-siteSimpleMenu li ul {
  position: absolute;
  left: 130px;
  width: 130px;
  top: 0px;
}

.dc-siteSimpleMenu ul li a {
  text-decoration: none;
  color: #979797;
  transition: 0.25s;
}

.dc-siteSimpleMenu ul li a:hover {
  color: #000000;
  transition: 0.5s;
}

.dc-siteSimpleMenu-start {
  position: fixed;
}

.dc-siteSimpleMenu-start>li>a {
  position: relative;
  top: 35px;
}

ul.dc-siteSimpleMenu-lvl-2  li {
    flex-basis: 25%;
    margin-right:30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dc-siteSimpleMenu">
  <ul class="dc-siteSimpleMenu-start">
    <li><a href='#'>menu</a>
      <ul class="dc-siteSimpleMenu-lvl-0">
        <li><a href='#'>Item 1 (submenu)</a>
          <ul class="dc-siteSimpleMenu-lvl-1">
            <li><a href='#'>Item 1-1 (submenu)</a>
              <ul class="dc-siteSimpleMenu-lvl-2">
                <li><a href='#'>Item 1-1-1 (link)</a></li>
                <li><a href='#'>Item 1-1-2 (link)</a></li>
                <li><a href='#'>Item 1-1-3 (link)</a></li>
                <li><a href='#'>Item 1-1-4 (link)</a></li>
                <li><a href='#'>Item 1-1-5 (link)</a></li>
                <li><a href='#'>Item 1-1-6 (link)</a></li>
                <li><a href='#'>Item 1-1-7 (link)</a></li>
              </ul>
            </li>
            <li><a href='#'>Item 1-2 (submenu)</a>
              <ul class="dc-siteSimpleMenu-lvl-2">
                <li><a href='#'>Item 1-2-1 (link)</a></li>
                <li><a href='#'>Item 1-2-2 (link)</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href='#'>Item 2 (link)</a></li>
        <li><a href='#'>Item 3 (link)</a></li>
        <li><a href='#'>Item 4 (link)</a></li>
      </ul>
    </li>
  </ul>
</div>

Вот мой jsfiddle https://jsfiddle.net/duncanchard/3gvo02tk/15/