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

Question

Длинная страница контента имеет несколько кнопок «читать дальше», сделанных с помощью jquery toggleClass.

Когда пользователь нажимает кнопку «читать дальше», содержимое отображается, и страница обновляется. (Мне нужно обновить страницу по разным причинам).

Когда страница обновляется, конечно, содержимое больше не раскрывается.

То, что я пытаюсь сделать, это:

• Сохранить все развернуть / сложить содержимое переключателя перед обновлением страницы
• Перейти к той же позиции прокрутки перед страницей-refresh

Я не уверен, что лучший способ сохранить информацию -> Cookie, sessionStorage или localStorage для моего случая, потому что пользователь обычно открывает больше подстраниц с помощью кнопок «Подробнее».

Я сделал jsfiddle (обновление страницы не работает на скрипке):

 jsfiddle.net/aq10zyku/

Большое спасибо за вашу помощь.

Answer 1

Я бы посоветовал использовать для этого sessionStorage.

Сначала удалите все onclick=refreshPage() из вашего HTML. Вы хотите хранить весь код JS внутри своего JS и устанавливать все обработчики в одном месте. Рекомендуется вообще не использовать onclick.

Далее создайте две функции: loadState() и saveState(). Вам нужно будет вызывать вызов loadState() при каждой загрузке (обновлении) страницы и saveState() каждый раз, когда нажимается кнопка переключения.

В обработчике нажатий кнопки также выполняйте обновление страницы.

Весь код JS:

$(window).on('load', function() {
  loadState();
});

$('.read-more-toggle').on('click', function() {
  $(this).next('.read-more-content').toggleClass('hide');

  saveState();
  refreshPage();
});

// Fold or unfold each content based on state before refresh
// And go to same scroll position before refresh
function loadState() {
  let hidden_states = sessionStorage.getItem('hidden-states');
  if (!hidden_states) {
    return;
  }
  hidden_states = hidden_states.split(',');
  $('.read-more-content').each(function(i, elem) {
    if (hidden_states[i] === 'hide') {
      elem.classList.add('hide');
    }
    else {
      elem.classList.remove('hide');
    }
  });

  document.scrollingElement.scrollLeft = sessionStorage.getItem('scroll-x');
  document.scrollingElement.scrollTop = sessionStorage.getItem('scroll-y');
}

// Remember fold & unfold states, and scroll positions
function saveState() {
  let hidden_states = [];
  $('.read-more-content').each(function(i, elem) {
    hidden_states.push(elem.classList.contains('hide') ? 'hide' : 'show');
  });

  sessionStorage.setItem('hidden-states', hidden_states);
  sessionStorage.setItem('scroll-x', document.scrollingElement.scrollLeft);
  sessionStorage.setItem('scroll-y', document.scrollingElement.scrollTop);
}

function refreshPage() {
  window.location.reload();
}

---

Примечание: Если это вообще возможно, старайтесь избегать обновления страницы. Сохранение состояний просмотра, а затем воссоздание их после обновления кажется неоптимальным. В некоторых браузерах это может также приводить к случайным сбоям при прокрутке при перерисовке восстановленных состояний.

Наконец, подумайте, действительно ли вам нужен jQuery для вашего проекта. Большая часть функциональности может быть реализована в vanilla JS.