Как с помощью js (jQuery) запомнить класс элемента при переходе на другую страницу?

Question

[lagprincesse]

есть боковое меню, открытие/закрытие которого регулируется классами тэга body: site-menubar-unfold / site-menubar-fold соответственно. надо, чтобы при переходе на новую страницу выбранное состояние сохранялось. реализовать требуется на js.
спасибо)

Answer 1

[RoverWhite]

Не стоит писать его в Куки.
Используйте sessionStorage или localStorage
https://developer.mozilla.org/ru/docs/Web/API/Wind...
https://developer.mozilla.org/ru/docs/Web/API/Wind...

Comments

[lagprincesse]

спасибо за ответ) подскажите еще, пожалуйста, как отследить изменение url? нагуглила только hashchange , но "Событие hashchange генерируется когда изменяется идентификатор фрагмента URL (т.е. часть URL следующая за символом #, включая сам символ #)." а у меня меняется не идентификатор, а html-страница. например, localhost/project/idex.html -> localhost/project/stat.html

[RoverWhite]

lagprincesse: А он меняется потому что пользователь переходит на другую страницу? Или вы его меняете чисто виртуально с помощью historyApi?

[lagprincesse]

RoverWhite: меняется, потому что пользователь переходит на другую страницу

[RoverWhite]

Хорошо, тогда:
вероятно нам требуется отследить изменение в пределах одной открытой вкладки броузера
нам подойдет объект sessionStorage он будет уникален для каждого открытого окна броузера,
и будет сохраняться вплоть до закрытия этого окна.
Будет сохраняться в пределах одного домена.
Соответственно мы получаем url
var pageAddress = location.href;
проверяем есть ли у нас в localStorage - pageAddress
Если есть то сравниваем значения и получаем поменялось или нет, затем записываем новое
Если нету значит записываем новое.

[lagprincesse]

RoverWhite: вот что получилось с хранилищем, но не могу придумать, как прикрутить еще и загрузку новой страницы...

// получаем адрес страницы, на которой находимся
    var pageAddress = location.href; 

    // записываем в хранилище класс, отвечающий за состояние меню
    if ($('body').hasClass('site-menubar-unfold')){
      sessionStorage.setItem("menuState","open"); 
    }
    else if ($('body').hasClass('site-menubar-fold')){
      sessionStorage.setItem("menuState","close");
    }

    //достаем из хранилища класс и, если он отличается от 'site-menubar-unfold', присваиваем его элементу body
    var menuState = sessionStorage.getItem("menuState");
    if (menuState == "close"){
      $("body").removeClass('site-menubar-unfold');
      $("body").addClass('site-menubar-fold');
    }

[RoverWhite]

//Проверяем поменялся ли URL страницы в данной вкладке броузера
var pageAddress = location.href;
var oldAddress = '';
if (localStorage.getItem('pageAddress')) {
  oldAddress = localStorage.getItem('pageAddress');
}
localStorage.setItem('pageAddress', pageAddress);
if (oldAddress == pageAddress) {
  //Страница не поменялась делаем действия, которые нам нужны при том же адресе
} else {
  //Страница поменялась или открыта впервые делаем действия, которые нам нужны при новом адресе
}

[lagprincesse]

RoverWhite: большое спасибо за помощь! теперь все получилось, как надо)

Answer 2

[Greg Popov]

Запишите его в куки на пример. Пример.

Answer 3

[narwhale]

Сессии ?