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

Question

我有一个标签包裹在 li 中。当用户点击时，调用 jquery 函数改变其样式

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

CSS

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

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

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

本地存储

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

Answer 1

使用 session 存储而不是本地存储。

session 存储在浏览器选项卡关闭时过期。 Local Storage 将物理缓存数据存储在您的驱动器上，直到使用 JavaScript 删除或浏览器缓存被清除之前没有过期日期。

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

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

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

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