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>

所以，如果我点击蓝色＆＃39;和/或＆＃39; Black＆＃39;它会将其存储在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

Answer 2

Check this Fiddler

$(document).ready(function(){

    $('.filters a').on('click', function() {

        var data_filter = $(this).closest("a").data('filter');
        $(this).addClass('active'); 
        if($(this).hasClass('active')) {
            localStorage.setItem(data_filter,true);
        } else {
            localStorage.setItem(data_filter,false);
        }

    });

   $('.filters a').each(function(){
        var data_filter = $(this).closest("a").data('filter');
        var checked = localStorage.getItem(data_filter);
        if(checked){
            $(this).addClass('active');
        } else {
            $(this).removeClass('active');
        }
    });
});

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

2 个答案: