如何通过 jQuery 在页面刷新时保留 <li> 标记的选定值

Question

如何在下面的代码中维护 ul>li 的选定值 HTML 代码

<ul class="paginationSize">
 <li>SHOW:</li>
 <li id="paginationClass" data-paginationValue="20" class=""><a href="#">20</a>
 </li>
 <li id="paginationClass" data-paginationValue="40" class=""><a href="#">40</a>
 </li>
 <li id="paginationClass" data-paginationValue="60" class=""><a href="#">60</a>
 </li>
</ul>

jQuery 相关 PHP 代码

$(".paginationSize li").click(function(){
        $(".active").removeClass("active");
        $(this).addClass("active");
        paginationSize =  $(this).attr("data-paginationValue");
        setGetParameter('pageSize',paginationSize);
    });

setGetParameter 函数

function setGetParameter(paramName, paramValue)
{
    var url = window.location.href;
    var hash = location.hash;
    url = url.replace(hash, '');
    if (url.indexOf(paramName + "=") >= 0)
    {
        var prefix = url.substring(0, url.indexOf(paramName));
        var suffix = url.substring(url.indexOf(paramName));
        suffix = suffix.substring(suffix.indexOf("=") + 1);
        suffix = (suffix.indexOf("&") >= 0) ? suffix.substring(suffix.indexOf("&")) : "";
        url = prefix + paramName + "=" + paramValue + suffix;
    }
    else
    {
    if (url.indexOf("?") < 0)
        url += "?" + paramName + "=" + paramValue;
    else
        url += "&" + paramName + "=" + paramValue;
    }
    console.log(url);
    window.location.href = url + hash;
}

我想在所选选项上保持活动类（即，如果我选择选项 40，那么在页面刷新后应该选择选项 40，默认我必须在值 20 上设置活动）

提前致谢

Answer 1

这里有一个解决方案https://jsfiddle.net/geow8bzu/

if( localStorage.getItem('lastSelectedli') != null ){
   $(".paginationSize li[data-paginationValue=" + localStorage.getItem('lastSelectedli') + "]").addClass('active');
}

$(".paginationSize li").click(function(){
    $(".active").removeClass("active");
    $(this).addClass("active");
    paginationSize =  $(this).attr("data-paginationValue");
  	localStorage.setItem('lastSelectedli', paginationSize);
    //setGetParameter('pageSize',paginationSize);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="paginationSize">
   <li>SHOW:</li>
   <li data-paginationValue="20" class=""><a href="#">20</a>
   </li>
   <li data-paginationValue="40" class=""><a href="#">40</a>
   </li>
   <li data-paginationValue="60" class=""><a href="#">60</a>
   </li>
</ul>

我使用localStorage 来存储最后选择的项目。

删除id="paginationClass"，因为id 应该是唯一的。