如何保持导航栏在服务器往返期间折叠？

Question

我的导航栏看起来像这样：

        <nav id = "nav" class="navbar-primary">
            <ul class="navbar-primary-menu">
                <li>
                    <a href="/home"></a>
                </li>
                <li>
                    <a href="/link1"></a>
                </li>
                <li>
                    <a href="/link2"></a>
                </li>
            </ul>
        </nav>

我正在使用JS折叠导航栏：

function navbar(){
  $('.navbar-primary').toggleClass('collapsed');
};

CSS：

.navbar-primary.collapsed {
  width: 55px;
}

我正在使用浏览器存储来存储变量，以记住用户是否折叠了导航栏。这是那一块：

$(document).ready(function(){
  var navbar_state = localStorage.getItem('navbar_state');

  if( navbar_state == 'collapsed'){
      console.log('collapsed found... collapsing on document ready');
      $('.navbar-primary').toggleClass('collapsed');
  };
}

这一切都很好，除了在每次往返之后，导航栏显示完全展开一秒钟，然后我的代码运行并且它被折叠的事实。如何在服务器往返期间将其完全折叠？