javascript - 如何在页面重新加载时停止从jQuery函数中删除附加的类

我有一个包裹在李里面的标签。用户单击时，将调用jquery函数以更改其样式

 $(".sortLabelElement").click(function () {
        $(this).addClass("ActiveSortLabel");
    });

的CSS

.ActiveSortLabel{
font-weight: bold;
text-decoration: none;
background-color:#C6E035;
}

我需要将此类附加到标签，直到被同一ul列表中的另一个标签单击为止。我的问题是，当我单击此标签链接时，表单将重新加载页面和页面，在这种情况下，我将ActiveSortLabel丢失给了标签。

<li><a value="Recommended" class="sortLabelElement sortTag    sortClickedEvent">Our Recommendation</a></li>

本地存储

localStorage.setItem('ActiveSortLabel', $(this).attr("id"));

最佳答案

使用会话存储而不是本地存储。

关闭浏览器选项卡时，会话存储将过期。本地存储将物理缓存数据存储在驱动器上，没有到期日期，直到使用JavaScript删除或将浏览器缓存清除。

//Example below will clear once browser tab is exited.

    sessionStorage.setItem('ActiveSortLabel', $(this).attr("id"));

// FYI如果用户在不关闭的情况下切换选项卡，则下面的代码行将清除存储。

    $(window).blur(function(){
    sessionStorage.clear();
   })