javascript - HTML5 LocalStorage - 如何将其与超链接一起使用？

Question

我希望在我的网页数据上使用 HTML5 本地存储，以便它在页面刷新后仍然存在。

这是我的代码:

<h3 data-target="#colours_filters">Colour</h3>
<ul id="colours_filters">
    <li class="filter-option"><a href="#" data-tax="colours" data-filter=".tag-colours-black-2">Black</a></li>
    <li class="filter-option"><a href="#" data-tax="colours" data-filter=".tag-colours-blue">Blue</a></li>
</ul>

所以，如果我点击“蓝色”和/或“黑色”，它会将其存储在 LocalStorage 中？

有人可以帮我指出正确的方向吗？

谢谢:-)

Answer 1

首先尝试为您的元素提供唯一的 id

<h3 data-target="#colours_filters">Colour</h3>
<ul id="colours_filters">
    <li class="filter-option"><a href="#" id='unique_1' data-tax="colours" data-filter=".tag-colours-black-2">Black</a></li>
    <li class="filter-option"><a href="#" id='unique_2' data-tax="colours" data-filter=".tag-colours-blue">Blue</a></li>
</ul>

然后

$(document).ready(function(){

    $('.filter-option a').on('click', function() {

        var isActived = $(this).hasClass('active') == false; 
        var id = $(this).attr('id');

        localStorage.setItem(id,isActived);

        $(this).toggleClass('active'); 
    });

    $('.filter-option a').each(function(){
        var id = $(this).attr('id');

        var hasActiveClass = localStorage.getItem("active");

        if(hasActiveClass != undefined){
            $(this).addClas('active');
        }
    });

});

fiddlejs