在页面刷新后隐藏/显示div重置

Question

希望一切都好。我正在做一个web应用程序，试图实现一些JavaScript代码。

我的web应用程序由三个部分组成:每个部分都有一个标题和一个按钮，如果单击该按钮，则显示以前不可见的div标记。再次按下相同的按钮将隐藏相同的div。显然，每个按钮都适用于其相关的部分;因此，按下Section1按钮将只显示/隐藏Section1div，依此类推，其他部分/按钮。

更准确地说，为了使mainpage.jsp更易于使用，当我按下按钮以显示例如Section1div时，其他两个div变得不可见:这意味着一次只能显示一个div。

到目前为止没有问题，我的函数-hideandshow(spoiler)-工作，但现在我试图实现两个功能。

第一个特性非常重要:当我重新加载mainpage.jsp时，我的应用程序需要记住它是否正在显示一个div，以便能够在刷新后也显示相同的div，保持其他div不可见。目前，页面在重新加载后会重置所有div。

经过一些搜索，我明白localStorage，或sessionStorage，是达到我的目标的最好方法，但经过几次尝试，我仍然不能使它工作。作为JavaScript的新手，我想我遗漏了一些重要的东西，所以我希望你们能帮助我找到它。

第二个功能，不太重要，因为它像是一个美学风格的功能，是使每个按钮能够在按下时改变其名称，在"显示部分(数字)"&;(div不可见)和"Hide Section (number)"(div不可见)每次点击。不幸的是，我不知道如何实现这个特性。我尝试了几个代码，我从堆栈溢出，但我不能正确地实现它们。事实上，我的按钮并没有在每次点击时正确地更改名称，并且按钮名称的修改也影响了其他按钮，而不仅仅是三个部分的按钮。这就是为什么我甚至没有尝试保留那些充满错误的代码。

我是JavaScript的新手，我真的尽了最大的努力，用尽了想法。提前感谢您的时间、耐心和帮助。

我代码:

// Checking localStorage  
if ( (JSON.stringify(localStorage.getItem('activespoiler'))  !== 'none') && (JSON.stringify(localStorage.getItem('activespoiler'))  !== null) )
{
document.getElementById(localStorage.getItem('activespoiler')).style.display = 'block';
}
// Show/hide div content defined by id (spoiler1, spoiler2, spoiler3)
function hideandshow(spoiler)
{
if(document.getElementById(spoiler).style.display === 'none')
{
document.getElementById(spoiler).style.display = 'block';
localStorage.setItem('activespoiler',JSON.stringify(spoiler));

// Closing other spoilers
if (spoiler === 'spoiler1')
{
document.getElementById('spoiler2').style.display = 'none';
document.getElementById('spoiler3').style.display = 'none';
}
else if (spoiler === 'spoiler2')
{
document.getElementById('spoiler1').style.display = 'none';
document.getElementById('spoiler3').style.display = 'none';
}
else if (spoiler === 'spoiler3')
{
document.getElementById('spoiler1').style.display = 'none';
document.getElementById('spoiler2').style.display = 'none';
}
}
else if (document.getElementById(spoiler).style.display === 'block')
{
document.getElementById(spoiler).style.display = 'none';
localStorage.setItem('activespoiler','none');
}        
}

<button type="button" onclick="hideandshow('spoiler1')">Show/Hide Section 1</button>

<div id="spoiler1" style="display:none">
This is the hidden text SECTION-1! <br>
<form action="mainpage.jsp" method="POST">
<button type="submit">RELOAD PAGE SECTION-1</button> 
</form>
</div> <br><br>
<!-- Section 2 -->
<button type="button" onclick="hideandshow('spoiler2')">Show/Hide Section 2</button>

<div id="spoiler2" style="display:none">
This is the hidden text SECTION-2!
<form action="mainpage.jsp" method="POST">
<button type="submit">RELOAD PAGE SECTION-2</button> 
</form>
</div> <br><br>
<!-- Section 3 -->
<button type="button" onclick="hideandshow('spoiler3')">Show/Hide Section 3</button>

<div id="spoiler3" style="display:none">
This is the hidden text SECTION-3!
<form action="mainpage.jsp" method="POST">
<button type="submit">RELOAD PAGE SECTION-3</button> 
</form>
</div>

Answer 1

第一个特征:

你可以在页面加载时检查值:

// Checking localStorage
window.onload = function() {
var spoiler = localStorage.getItem('activespoiler');
if(spoiler !== 'none'){
document.getElementById(spoiler).style.display = 'block';
document.getElementById(spoiler + '_button').textContent = 'Hide Section ' + spoiler.slice(-1);
}
}

第二个特性:

不理想，但可以工作:

1. 添加id到您的按钮，如spoiler + _button:

   id="spoiler3_button"
   

2. 用下面的代码修改脚本:

   // Checking localStorage
   window.onload = function() {
   var spoiler = localStorage.getItem('activespoiler');
   if(spoiler !== 'none'){
   document.getElementById(spoiler).style.display = 'block';
   document.getElementById(spoiler + '_button').textContent = 'Hide Section ' + spoiler.slice(-1);
   }
   }
   // Show/hide div content defined by id (spoiler1, spoiler2, spoiler3)
   function hideandshow(spoiler)
   {
   var oldSpoiler = localStorage.getItem('activespoiler');
   if(oldSpoiler !== spoiler && oldSpoiler !== null) {
   document.getElementById(spoiler).style.display = 'block';
   document.getElementById(oldSpoiler).style.display = 'none';
   document.getElementById(spoiler + '_button').textContent = 'Hide Section ' + spoiler.slice(-1);
   document.getElementById(oldSpoiler + '_button').textContent = 'Show Section ' + oldSpoiler.slice(-1);
   localStorage.setItem('activespoiler', spoiler);
   }
   else if (oldSpoiler !== null) {
   if (document.getElementById(spoiler).style.display === 'none') {
   document.getElementById(spoiler).style.display = 'block';
   document.getElementById(spoiler + '_button').textContent = 'Hide Section ' + spoiler.slice(-1);
   }
   else {
   document.getElementById(spoiler).style.display = 'none';
   document.getElementById(spoiler + '_button').textContent = 'Show Section ' + spoiler.slice(-1);
   }
   localStorage.setItem('activespoiler', spoiler);
   }
   else {
   document.getElementById(spoiler).style.display = 'block';
   document.getElementById(spoiler + '_button').textContent = 'Hide Section ' + spoiler.slice(-1);
   localStorage.setItem('activespoiler', spoiler);
   }
   }
   

Answer 2

在你的代码中一切都是好的，除了这一行:

localStorage.setItem('activespoiler',JSON.stringify(spoiler));

删除JSON.stringify并直接使用sploiler防止添加">到你的标签id，像这样:

localStorage.setItem('activespoiler',spoiler);

，它会工作!

最好不要使用inline-style这里是你的HTML标签:

style="display:none"

，你可以使用javascript代码将它们隐藏在脚本顶部的初始渲染中，如下所示:

document.getElementById('spoiler1').style.display = 'none';
document.getElementById('spoiler2').style.display = 'none';
document.getElementById('spoiler3').style.display = 'none';