Javascript 如何在使用本地存储重新加载页面时存储div的活动类

在页面重新加载时，我无法为某个div保存活动类，当我单击第一个div中的按钮时，它的活动类将被删除，而下一个类将被激活。但是当页面在第二个div中重新加载时，如何在页面重新加载时为第二个div保存活动类。我试着使用本地存储，但我不知道

<div class="divs active" id="first">
  <h1> first div</h1>
   <a class="btn-link" href="javascript:void(0);" id="btn-first">Next - 2</a>
</div>
<div class="divs" id="second">
 <h1> second div</h1>
  <a class="btn-link" href="javascript:void(0);" id="btn-second"/>Next -3 </a>
</div>
<div class="divs" id="third">
 <h1> third div</h1>
   <a class="btn-link" href="javascript:void(0);" id="btn-third"/>Next -1</a>
</div>

<script>
$(document).ready(function(){

  $('#btn-first').click(function(){
    $('.divs').removeClass('active');
    var activeID = $('#second').addClass('active');
    console.log(activeID);
    localStorage.setItem("activeDIV", activeID);

    //var reloadactiveDIV = localStorage.getItem("activeDIV");

    // var activeID = $('#second');
    // localStorage.setItem('activeTab', $activeID );
    // var activeTab = localStorage.getItem('activeTab');
    // if (activeTab) {
    //     $('.divs').removeClass('active');
    //     $('#second').addClass('active');
    // }
  });

  $('#btn-second').click(function(){
    $('.divs').removeClass('active');
    $('#third').addClass('active');
  });
  $('#btn-third').click(function(){
    $('.divs').removeClass('active');
    $('#first').addClass('active');
  });


});
</script>

第一组
第二组
第三组
$（文档）.ready（函数（）{
$（“#btn优先”）。单击（函数（）{
$（'.divs'）.removeClass（'active'）；
var activeID=$（'#second'）.addClass（'active'）；
log（activeID）；
setItem（“activeDIV”，activeID）；
//var reloadactiveDIV=localStorage.getItem（“activeDIV”）；
//var activeID=$（“#秒”）；
//setItem（'activeTab'，$activeID）；
//var activeTab=localStorage.getItem（'activeTab'）；
//如果（活动选项卡）{
//$（'.divs'）.removeClass（'active'）；
//$（'#second'）.addClass（'active'）；
// }
});
$（'#btn秒'）。单击（函数（）{
$（'.divs'）.removeClass（'active'）；
$（'third'）.addClass（'active'）；
});
$（'#btn third'）。单击（函数（）{
$（'.divs'）.removeClass（'active'）；
$（'first'）.addClass（'active'）；
});
});

要实现这一点，您可以将活动div的

索引

存储在本地存储中，而不是整个jQuery对象，然后在下次加载页面时，在本地存储索引中的元素上重新设置

活动

类

还请注意，您可以通过对所有按钮使用单个事件处理程序来消除逻辑。您可以找到父级

.divs

并检索下一个，如果没有下一个同级，则循环返回到第一个。试试这个：

$（文档）.ready（函数（）{
//单击时设置为活动：
$（'.btn链接'）。单击（函数（e）{
e、 预防默认值（）；
var$parentDiv=$（this）.closest（'div'）；
var$nextDiv=$parentDiv.next（'div'）；
var$divs=$（'.divs'）.removeClass（'active'）；
如果（！$nextDiv.长度）
$nextDiv=$divs.first（）；
$nextDiv.addClass（'active'）；
setItem（“activeDiv”，$nextDiv.index（'.divs'））；
});
//在负载时设置活动：
var activeIndex=localStorage.getItem（“activeDiv”）；
如果（活动索引）
$（'.divs'）.removeClass（'active'）.eq（activeIndex）.addClass（'active'））
});

---

请注意，我无法将工作示例放在SO代码段中，因为它对访问localStorage有限制。

我更喜欢使用sessionStorage而不是localStorage。会话存储属性为每个给定原点维护一个单独的存储区域，该存储区域在页面会话期间可用，即只要浏览器处于打开状态，包括页面重新加载和恢复。本地存储也有同样的功能，但即使在浏览器关闭和重新打开时也会保持不变。你说得对，但我并不认为这是首选。这完全是关于您需要将数据存储多长时间