How to retain/maintain collapse and expand states of even after a page refresh?

How to retain/maintain collapse and expand states of even after a page
refresh?

Suppose I have the following simple <p:panelMenu>.
<p:panelMenu style="width:200px">
<p:submenu label="Contents">
<p:menuitem value="MenuItem1" url="SomeURL" icon="ui-icon-disk" />
<p:menuitem value="MenuItem2" url="SomeURL" icon="ui-icon-disk" />
<p:menuitem value="MenuItem3" url="SomeURL" icon="ui-icon-disk" />
</p:submenu>
<p:separator />
<p:submenu label="Users">
<p:menuitem value="MenuItem1" url="SomeURL" icon="ui-icon-disk" />
<p:menuitem value="MenuItem2" url="SomeURL" icon="ui-icon-disk" />
<p:menuitem value="MenuItem3" url="SomeURL" icon="ui-icon-disk" />
</p:submenu>
</p:panelMenu>
Once a sub menu is expanded should remain expanded until it is explicitly
collapsed even after a page refresh.
Similarly, sometime later, if the sub menu is collapsed should remain
collapsed until it is explicitly expanded even after the page
reloaded/refreshed. Is this possible?



By the way, the following script expands a panelMenu by default.
$(".ui-panelmenu-content").css("display","block");
$(".ui-panelmenu-header").addClass("ui-state-active");
$(".ui-icon-triangle-1-e").removeClass("ui-icon-triangle-1-e").addClass("ui-icon-triangle-1-s");
And the following script expands the first sub menu of <p:panelMenu>, if
it is collapsed.
var isMenuExpanded =
jQuery('div.ui-panelmenu-content.ui-widget-content.ui-helper-hidden').is(':visible');
if(!isMenuExpanded)
{
jQuery('.ui-panelmenu-panel a').first().click();
}