页面刷新后保持滚动位置并保存切换

Question

长内容子页面有多个“阅读更多”按钮，使用 jquery toggleClass 完成。

当用户单击“阅读更多”按钮时，内容会显示并且页面会刷新。 （由于各种原因，我需要刷新页面）。

当页面刷新时，内容当然不会再展开了。

我想做的是：

• 在页面刷新之前保存所有展开/折叠切换内容。
• 在页面刷新之前转到相同的滚动位置。

我不确定保存信息的最佳方式是什么 -> Cookies、sessionStorage 或 localStorage 就我而言，因为用户通常会打开更多带有“阅读更多”按钮的子页面。

我做了一个JSFiddle（页面刷新无法正常工作）。

Answer 1

我建议为此使用sessionStorage。

首先，从您的 HTML 中删除所有 onclick=refreshPage()。您希望将所有 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 中实现。