嵌套菜单的jQuery切换 - 如何在页面加载时保持打开状态？

Question

我正在使用带有jQuery切换的嵌套垂直导航来滑动每个部分。

如果我打开嵌套部分并导航到新页面，如何在新页面上保持菜单的当前状态？目前它重新加载并关闭所有部分。

我尝试过使用jQuery cookie插件，但是它记住了每页菜单的状态，例如它在一个页面上打开但在另一个页面上没有打开。

这是我正在做的代码笔示例（没有任何cookie的版本，只是jQuery切换）

http://codepen.io/codeycodecode/pen/hxfws/

$(document).ready(function(){
  $(".slide").click(function(){
    var target = $(this).parent().children(".slideContent");
    $(target).slideToggle();
  });
});

HTML：

<nav>
  <ul>
    <li class="depth-1">
      <a class="slide header" href="#">Identity</a>  
      <ul class="slideContent" >
          <li class="depth-2"><a href="#">Link</a></li>
      </ul>
    </li>
    <li class="depth-1" >
      <a class="slide header" href="#">Products</a>
      <ul class="slideContent">
        <li class="depth-2">
          <a href="#">Widgets</a>
        </li>
        <li class="depth-2">
          <a class="slide header" href="#">Desktop Apps</a>
          <ul class="slideContent ">
            <li class="depth-3">
              <a href="#">Email App</a>
            </li>
            <li class="depth-3">
              <a  class="slide header" href="#">Editing App</a>
              <ul class="slideContent">
                <li class="depth-4">
                  <a href="#">Color</a>
                </li>
                <li class="depth-4">
                  <a href="#">Icons</a>
                </li>
                <li class="depth-4">
                  <a href="#">Typeface</a>
                </li>
                <li class="depth-4">
                  <a href="#">Prototype</a>
                </li>
                <li class="depth-4">
                  <a class="slide header" href="#">Development</a>
                  <ul class="slideContent"> 
                      <li class="depth-5" ><a  href="#">Link</a></li>
                    <li class="depth-5" ><a  href="#">Link</a></li>
                    <li class="depth-5" ><a  href="#">Link</a></li>   
                  </ul>
                </li>
              </ul>  
            </li>
          </ul>  
        </li>
        <li class="depth-2">
          <a href="#">Mobile Apps</a>
        </li>
      </ul> 

    </li>
  </ul>   
</nav>