Question

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

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

刷新页面后，内容当然不再显示。

我想做的是：

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

我不确定保留信息的最佳方法->对于我的情况，是Cookie，sessionStorage或localStorage，因为用户通常会使用“阅读更多”按钮来打开更多子页面。

我做了一个jsfiddle（页面刷新在小提琴上不起作用）：

 jsfiddle.net/aq10zyku/

非常感谢您的帮助。

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。大多数功能都可以在原始JS中实现。

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

1 个答案: