Сохранить меню для переключения состояния после перезагрузки страницы

Question

Вот меню переключателей, которое отлично работает: Если я нажму на ссылку (HTML-код ниже), меню скроется. Но я хочу, чтобы пользователи перезагружали страницу, чтобы сохранить состояние меню (развернуть/свернуть).

$('#menu_toggle').click(function() { 
 
     if ($('body').hasClass('nav-md')) { 
 
      $('body').removeClass('nav-md'); 
 
      $('body').addClass('nav-sm'); 
 
      $('.left_col').removeClass('scroll-view'); 
 
      $('.left_col').removeAttr('style'); 
 
      $('.sidebar-footer').hide(); 
 

 
      if ($('#sidebar-menu li').hasClass('active')) { 
 
       $('#sidebar-menu li.active').addClass('active-sm'); 
 
       $('#sidebar-menu li.active').removeClass('active'); 
 
      } 
 
     } else { 
 
      $('body').removeClass('nav-sm'); 
 
      $('body').addClass('nav-md'); 
 
      $('.sidebar-footer').show(); 
 

 
      if ($('#sidebar-menu li').hasClass('active-sm')) { 
 
       $('#sidebar-menu li.active-sm').addClass('active'); 
 
       $('#sidebar-menu li.active-sm').removeClass('active-sm'); 
 
      } 
 
     } 
 
    });

<a id="menu_toggle"><i class="fa fa-bars"></i></a>

Как вспомнить состояние? Полный проект: http://demo.kimlabs.com/gentelella/production/index.html Благодаря

Answer 1

Это та вещь, я хотел бы использовать localStorage для. Просто установите какой-то флаг в localStorage, когда состояние изменится и извлечет его, когда загружается ваша страница.

Я должен добавить, что использование классов css для представления состояния представления не является хорошей идеей и укусит вас, если ваш пользовательский интерфейс будет намного сложнее.

Answer 2

Вы должны использовать файлы cookie для хранения логических значений, если меню открыто или закрыто. Затем, когда страница загружается, она проверяет любые сохраненные файлы cookie и по умолчанию использует эти переменные.

Например:

на странице загрузки:

var menuOutBoolean = Cookies.get("menuOutB") || false; 
if (menuOutBoolean == true || menuOutBoolean == "true"){ 
    //put the menu out 
} 
else { 
    //put menu in 
} 

На смену:

if (/*out*/){ 
    Cookies.set("menuOutB","true"); 
} 
else{ 
    Cookies.set("menuOutB","false"); 
} 

Примечание: Здесь я использовал this JavaScript API (Jquery Plugin).