javascript - CSS Add Class active 以在页面重新加载后阻止

Question

我有以下 HTML:

<div class="side-button"> 
   <a href="/first"> First Option <a>
</div>
  <div class="side-button"> 
   <a href="/second"> Second Option <a>
</div>

当用户单击其中一个 block 时，我希望它变为事件状态，以便我可以用另一种颜色突出显示它。

在我的 jQuery 中，我试图在单击的 block 上添加 active 类:

jQuery(document).ready(function( $ ){
    $(".side-button").bind('click', function () {
      $(".side-button").removeClass("active");
      $(this).addClass("active");
    });
});

它在加载下一页时起作用。重定向后，它不记得 active 类。

如何添加类 active 以便它在加载的页面上记住它？

Answer 1

为了记住重定向/页面加载的一些东西，我们可以使用本地存储/ session 存储

 jQuery(document).ready(function( $ ){
        var retrievedClassName = localStorage.getItem('activeClass');
        if(retrievedClassName == "active"){
             //add active class to your element
        }
        $(".side-button").bind('click', function () {
          $(".side-button").removeClass("active");
          $(this).addClass("active");
          localStorage.setItem('activeClass', "active");
        });
    });