title: Bootstrap 4 Sidebar menu to stay open on page reload
body: <p>I integrated a menu based on <a href="https://www.codeply.com/go/T2mpwMOt60" rel="nofollow noreferrer">https://www.codeply.com/go/T2mpwMOt60</a> into a website I'm building. Having used it during the build process there is one feature which I feel it misses.
  Ideally I would like to have a menu item stay open when navigating to another page. So, looking at the sample menu, that would mean that if Item 3 was open, it should stay open when the page is reloaded, but close if another menu heading was clicked.
  Given that every menu section starts with</p>
  
  <pre><code>&lt;a href="#menu1"
  
  &lt;a href="#menu2"
  </code></pre>
  
  <p>etc, and when opened, the class changes from</p>
  
  <pre><code>class="list-group-item collapsed"
  </code></pre>
  
  <p>to</p>
  
  <pre><code>class="list-group-item"
  </code></pre>
  
  <p>I figured that the current menu state could be written to local storage and then read back in on page load to restore the previous state.</p>
  
  <p>Does anyone know of examples that would point me in the right direction on coding this type of functionality?</p>
  
  <p>I've just tried using the following script to save to localStorage</p>
  
  <pre><code>$(document).ready(function () {
  $('a').click(function() {
      //store the id of the collapsible element
      localStorage.setItem('collapseItem', $(this).attr('href'));
  });
  
  var collapseItem = localStorage.getItem('collapseItem'); 
  if (collapseItem) {
     $(collapseItem).collapse('show')
  }
  })
  </code></pre>
  
  <p>It doesn't reopen the menu, but I suspect that is due to what is getting put into local.storage
  As an example, When I first click to open the 'customers' sub menu, it stores  #menu5, which is the sub menu I would want to be reopened on reload, but when clicking any of the children inside that menu, the stored data will change to the url of the last clicked link.</p>
  
  <p>Additional note, if I reload the page whilst #menu1, #menu2 etc is stored, then it loads with the menu displaying correctly. So it is purely a case of figuring out how to NOT store anything other than the initial #menu open.</p>