maintain state in jquery function when page refreshes

I have an web forms website with master page and few other pages.

In master page, i have <asp:ContentPlaceHolder ID=“Placeholder1” runat=“server”></asp:ContentPlaceHolder> , where the content of the child pages are loaded.

one of the page is default.aspx ,, as such

<asp:Content runat=“server” ID=“content1” ContentPlaceHolderID=“Placeholder1”></asp:Content>

I want to change default.aspx , such that I have a side menu column and a content column. Aslo I have a anchor tag. I wrote a javascript/jquery function as such on documen t ready

$("#togglemenu").on(click, function(){

the toggle works, but in the main content section , i have a table and can increase the size of the rows displayed in the table, when I change the pagenumber or change the number of items displayed in the table, the page refreshes and it doesn't maintain what state the sidemenu was in . I.e even if the menu was hidden, when i change the page number, the page refreshes and side menu appears . I want it to be hidden , if the user had hidden the menu and then changed the page number.

how can i achieve this in web forms.

<asp:Content runat=“server” ID=“content1” ContentPlaceHolderID=“Placeholder1”>

<a >  <span id="togglemenu" > Hide menu </span></a>
<div id="sidemenu">

<div id="main content"> </div>

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chinmay PatelChief Technology NinjaCommented:
Hi Mikha,

You will have to use a persisted storage to make that happen. Your choices are:
1. SessionState
2. ViewState
3. HiddenField
4. WebStorage

Choose one, store all the settings that you make on the page(for example, if a menu is being shown or hidden, store its state in any of the above one), every time your page loads read those values back again, call necessary functions so that they are reflected on the page properly and you are good to go.

Chinmay PatelChief Technology NinjaCommented:
Also, I am wondering, why you are not using AJAX? that way only part of the page will reload/change.
mikhaAuthor Commented:
Do I use update panels for enabling Ajax?
Chinmay PatelChief Technology NinjaCommented:
Julian HansenCommented:
My preference would be localstorage. Create a state model and stringify it to localStorage. When the page loads read it back again.

$(function() {
  var state = JSON.parse(localStorage.getItem('state') || '{"sideMenu": false}');

  if (state.sideMenu) {

  $("#togglemenu").on(click, function(){
    // ID (#) CLASS (.) PREFIX OUT

    state.sideMenu = $('#sidemenu').is(':visible');

    localStorage.setItem('state', JSON.stringify(state));

Open in new window

If you are only interested in the state of the Side Menu you could also store this value in a cookie.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.