长内容子页面具有多个使用jquery toggleclass完成的“阅读更多”按钮。
当用户单击“阅读更多”按钮时，将显示内容并刷新页面。 （出于各种原因，我需要刷新页面。）
刷新页面后，内容当然不再显示。
我想做的是：
我不确定保留信息的最佳方法->对于我的情况，是Cookie，sessionStorage或localStorage，因为用户通常会使用“阅读更多”按钮来打开更多子页面。
我做了一个jsfiddle（页面刷新在小提琴上不起作用）：
jsfiddle.net/aq10zyku/
非常感谢您的帮助。
我建议为此使用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中实现。