how to maintain state in Collapse Jquery

Question

I have problem on my side bar collapsible menu. when the user click on sub link on the menu the page will refresh and lost the highlight of selected sub item link and parent link item side nav bar and reset it.what I'm trying to do is to man maintain states of side bar collapsible sub item and highlight when the all page refresh ?

html

 <link href="StyleSheet1.css" rel="stylesheet" />
    <script src="Scripts/jquery-2.1.3.min.js"></script>
    <script src="JavaScript1.js"></script>
    <div class="menu_div">
        <ul id="active">
            <li id="active">
                <a href="#">Test 1</a>
                <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                </ul>
            </li>
            <li id="active">
                <a href="#">Test 2 </a>
                <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                    <li><a href="#">Item 5</a></li>
                </ul>
            </li>
        </ul>
    </div>
Jq


 $(document).ready(function () {
        $('#active li ul').hide();
        $('#active > li > a').click(function () {
            if ($(this).attr('class') != 'active') {
                $('#active li ul').slideUp();
                $(this).next().slideToggle();
                $('#active li a').removeClass('active');
                $(this).addClass('active');
            }
        });
});

css

.menu_div ul
{
    padding:0px;
    margin:0px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:15px;
    color:#FFF;
    list-style:none;
    text-indent:15px;
}
.menu_div ul li
{
    background:#3f3f3f;
    line-height:28px;
        border-bottom:1px solid #333;
}
.menu_div ul li a
{
    text-decoration:none;
    color:#FFF;
    display:block;
}
.menu_div ul li a:hover
{
    background:#ff850d;
}
.menu_div ul li#active
{
    background:#ff850d;
}

Answer 1

once you refresh your page, all the javascript/dom will reload again, it will recovery to the origin status, so the page can't record your previous state.

2 recommendation:

1. use the dynamic program language like java/php/asp to record this state.
2. add flag in your specific page. Like below code which I have used recently.

HTML Code

Menu HTML:

<ul class="home">
    <li class="item1"><a href="">item 001</a></li>
    <li class="item2"><a href="">item 002</a></li>
    <li class="item3"><a href="">item 003</a></li>
</ul>
<ul class="java">
    <li class="java_item1"><a href="">java_item 001</a></li>
    <li class="java_item2"><a href="">java_item 002</a></li>
</ul>

Specific Page Indetifier(you can use the <input type="hidden" id="identifier" value=""/> ), such we define it like:

<!-- which means it's the home page and the item1 li -->
<input type="hidden" id="identifier" value="home:item1"/>

Javascript Code:

$(document).ready(function() {
    // TODO: you can remove all the active class from your menu nodes.

    var identifier = $('#identifier').val();
    if(identifier && identifier.indexOf(':') > -1) {
        // means this should be handle the menu state
        var specificItems = identifier.split(':'); // [0] means the ul identifier, [1] means the li identifier
        $('.' + specificItems[0]).addClass('active').find('.' + specificItems[1]).addClass('.active');
    }
});

Details you can reference this thoughts.