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

Answer 2

檢查這個提琴手

$(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');
        }
    });
});